Twitter引导程序对齐问题

Question

我使用Twitter Bootstrap制作移动应用程序来处理用户界面。另外我使用的是font-awesome和flat-ui。

我的问题是：

1. 无法垂直对齐标题图片与img-responsive
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

这种情况正在发生，因为.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

---

修改

正如ilias在他的回答中所提到的，不要搞乱网格样式。删除您按照他们的说法将列设置为inline-block的代码块。

Answer 2

我认为根据引导文档.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;
}