移动引导网格项

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

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

function myFunction(){
    ...
    return true;    
}

此屏幕中的所有元素都会隐藏，直到屏幕最小，适合智能手机。

Answer 2

使用Bootstrap类：

.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保持联系：）