html - Twitter Bootstrap 对齐问题

Question

我正在制作一个移动应用程序，使用 Twitter Bootstrap 来处理 UI。此外，我正在使用 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 设置像素大小，然后设置顶部边距以使其与图标重新对齐。 (注意我在下面添加了#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 的代码块。