Twitter的引导对齐问题

Question

我正在使用Twitter的引导来处理UI的移动应用程序。此外，我使用字体真棒和平面用户界面。

我的问题是：

1. 可以与IMG响应
2. 选项图标不垂直对齐头部图像熄灭页面

的当我观看页面在一个大窗口中，间距很好;例如：

现在，当窗口被缩小（到什么是显示在移动设备上的大小），我开始体验的问题。例如：

这里是边框，使其多一点显而易见：

编辑：

垂直对齐问题，使用固定的利润率解决，最大宽度。

图标问题仍然存在。

HTML

<div class="container"> 
    <br /> 
    <br /> 
    <div class="row">   
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <a class="btn btn-inverse" href="#"><i class="fa fa-home fa-2x"></i> </a> 
      </div> 
      <div id="logo" class="col-xs-8 col-sm-8 col-md-8 col-lg-8"> 
       <img src="images/example.png" alt="example" class="img-responsive"> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <a class="btn btn-inverse" href=".\options.html"><i class="fa fa-cogs fa-2x"></i></a> 
      </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
       <a class="btn btn-primary" href=".\1.html">Link 1</a> 
      </div> 
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3">  
       <a class="btn btn-primary" href=".\2.html">Link 2</a> 
      </div> 
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
       <a class="btn btn-primary" href=".\3.html">Link 3</a> 
      </div> 
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
       <a class="btn btn-primary" href=".\4.html">Link 4</a> 
      </div> 
     </div> 
    </div> 
    <br /> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
      <img src="images/image.jpg" alt="image" class="img-rounded img-responsive"> 
      <br /> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <a href=".\start.html" class="btn btn-block btn-lg btn-primary">START</a> 
     </div> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <a href=".\fav.html" class="btn btn-block btn-lg btn-fav">FAVORITE</a> 
     </div> 
    </div> 
    <hr> 
</div> 
<!-- Container --> 

CSS

body { 
    text-align:center; 
    background-color: #1E1E1E; 
    color: #D8D8D8; 
} 

.row-coloured { 
    /* Green background */ 
    background-color: #29591D; 
} 

.centered { 
    vertical-align: middle; 
    text-align: center; 
} 

.btn-fav { 
    background: #5f774e; 
    border-color: #eaf2ea; 
} 

.btn-fav:hover { 
    background: #789463; 
    border-color: #eaf2ea; 
} 

@media only screen 
and (max-width : 768px) { 

    #logo img { 
    width: 200px; 
    height: auto; 
    margin: 16px auto; 
    } 

} 

.col-xs-2 > a { 
    display: inline-block; 
    margin: 6px 0; 
} 

任何想法如何防止/为什么发生？我觉得我已经尝试了50件事情而没有任何进展。

Answer 1

我认为，根据引导文件.col-元素应该是row元素的直接子。您应该解决以下几点：

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this--> 
      <a class="btn btn-primary" href=".\1.html">Link 1</a> 
     </div> 
     <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this-->  
      <a class="btn btn-primary" href=".\2.html">Link 2</a> 
     </div> 
     <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this--> 
      <a class="btn btn-primary" href=".\3.html">Link 3</a> 
     </div> 
     <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this--> 
      <a class="btn btn-primary" href=".\4.html">Link 4</a> 
     </div> 
    </div> 
</div> 

尝试包装产生的.col-元素像这样的孩子的div里面填充的元素：

<div class="row">   
     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
      <div class="topwrappers"><!-- like this --> 
      <a class="btn btn-inverse" href="#"> 
       <i class="fa fa-home fa-2x"></i> 
      </a> 
      </div> 
     </div> 
     <div class="img2 col-xs-8 col-sm-8 col-md-8 col-lg-8"> 
      <div class="topwrappers" id="topcenter"><!-- like this --> 
      <img src="images/example.png" alt="example" class="img-responsive"> 
      </div> 
     </div> 
     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
      <div class="topwrappers"><!-- like this --> 
      <a class="btn btn-inverse" href=".\options.html"> 
       <i class="fa fa-cogs fa-2x"></i> 
      </a> 
     </div> 
    </div> 
    <!--And so on for the rest.--> 

也可以尝试删除的div之间的寄生<br/>和<hr/>然后删除这从你的CSS，因为我认为它会搅乱网格：

.col-xs-8 .col-sm-8 .col-md-8 .col-lg-8 { 
    float:none; 
    display:inline-block; 
    vertical-align:middle; 
    margin-right:-4px; 
} 

和添加这样的：

.topwrappers{ 
    width:100%; 
    height:100%; 
} 

#topcenter{ 
    text-align:center; 
} 

Answer 2

，它的发生是因为在.img-responsive类使图像具有100％的最大宽度。然后图像的高度随之变大，所以它不像它那么高。

您可以使用媒体查询在较小的设备上为徽标设置像素大小，然后将边距设置为与图标重新对齐。 （注意我在下面添加了一个#logo ID）。

@media only screen 
and (max-width : 768px) { 

    #logo img { 
    width: 200px; 
    height: auto; 
    margin: 12px auto; 
    } 

} 

的图标会关闭，因为他们有.btn类，它有padding: 6px 12px。 在那个填充使元件宽度大于它的容器（在col-xs-2所以他们溢出其容器的小设备。你可以删除.btn .btn-inverse类，然后用CSS调整你的图标的样式。

.col-xs-2 > a { 
    display: inline-block; 
    margin: 6px 0; 
} 

DEMO

---

编辑

正如他的回答中提到的那样，不要混淆网格样式。正如他们所说，删除将列设置为inline-block的代码块。