移动引导网格项目答案

【问题标题】：Move bootstrap grid items移动引导网格项目
【发布时间】：2016-09-20 15:42:37
【问题描述】：

假设我们有两个引导部分。第一个有徽标。第二个分为另外两个引导部分。就这样..

<div class="col-md-3">
 <img src="logo.png">
</div>

<div class="col-md-9">
 <div class="col-md-12">
  <i class="fa fa-phone"></i>
  <i class="fa fa-marker"></i>
 </div>
 <div class="col-md-12">
  //Navbar
 </div>
</div>

现在我的客户要求在导航链接后面的移动视图的导航区域中添加字体真棒字体部分显示。请参阅屏幕截图。社交图标放置在另一个 div 部分。所以我不能把它移到导航链接。但我用这种方式尝试了媒体采石场。添加社交图标作为导航链接。在普通屏幕上隐藏它，在移动视图上显示它。这是实现我的要求的合法方式吗？

【问题讨论】：

请发帖minimal reproducible example。你也忘了包括你的截图。

标签： html css twitter-bootstrap

【解决方案1】：

在普通屏幕上隐藏它，在移动视图上显示它。这是合法的吗实现我的要求的方法？

查看 getbootstrap 网站上的响应式实用程序部分

http://getbootstrap.com/css/#responsive-utilities

您可以根据屏幕大小使用类来显示/隐藏元素。在您的情况下，您会将社交图标放在带有 hidden-sm hidden-md hidden-lg 类的 div 中。

<div class="hidden-sm hidden-md hidden-lg"></div>

此 div 中的所有元素都隐藏到屏幕最小为止，适用于智能手机。

【讨论】：

【解决方案2】：

使用引导类：

.hidden-sm 
.hidden-md
.hidden-lg

将隐藏在那些媒体查询上，您也可以使用相反的 .visible-* (* - sm, md, lg)。

附带说明，我建议使用行来分隔列：

<div class="row">
    <div class="col-md-3">
       <img src="logo.png">
    </div>

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-12">
                <i class="fa fa-phone"></i>
                <i class="fa fa-marker"></i>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                //Navbar
            </div>
        </div>
    </div>
</div>

与 Bootstrap 保持内联:)

【讨论】：