移动引导程序栅格项目

Question

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

<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部分。所以我无法将其移动到导航链接。但我以这种方式尝试了媒体采石场。将社交图标添加为导航链接。在正常屏幕上隐藏它，在移动视图上显示它。这是达到我的要求的合法方式吗？

Answer 1

隐藏它正常屏幕上，其显示在移动图。那是否合法 达到我的要求？

看一看的响应公用事业部分getbootstrap网站

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

您可以使用类来说明根据屏幕尺寸/隐藏元素上。在你的情况下，你可以将你的社交图标放在隐藏隐藏md hidden-lg类的div中。

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

在这个div的所有元素都隐藏，直到屏幕在它的最小的，适合智能手机。

Answer 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> 

住内嵌引导:)