Question

我正在尝试使用Bootstrap创建一个网页。这就是我想要的样子： enter image description here

但是我无法让图片对齐。这是我到目前为止： enter image description here

我尝试在我的列中添加无填充和无边距，但这似乎没有成功。这是我到目前为止的HTML：

<body>
<div class="container">
  <div class="row">
    <div class="col-lg-8"><img src="img/logo.png" class="img-responsive"></div>
  </div>
  <div style="margin-top:30px"></div>

  <div class="row">
  <div class="col-lg-3 nopadding"> <img class="img-responsive" src="img/tagline.png"></div>
  <div class="col-lg-3 nopadding"> <img class="img-responsive" src="img/karen_big.png"></div>
  <div class="col-lg-6 nopadding"><img class="img-responsive"src="img/don_big.png"></div>
  <div class="col-lg-3 nopadding"><img class="img-responsive" src="img/elwood_big.png" style=""></div>
  <div class="col-lg-3 nopadding"><img class="img-responsive" src="img/michigan.png"></div>
  </div>


</body>
</html>

这是我添加的没有填充且没有边距的CSS：

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

提前致谢！

Answer 1

你的标记看起来应该更像是为了得到正确的对齐方式：

+---------+----------+
|+-------+|          |
||   |   ||          |
|+---+---||          |
||   |   ||          |
|+---+---+|          |
+----+----+-----+----+
|    |    |     |    |
+----+----+-----+----+

或者翻译成bootstrap网格系统：

<div class='row'>
    <div class='col-md-6'>
        <div class='row'>
            <div class='col-md-6'></div>
            <div class='col-md-6'></div>
        </div>
        <div class='row'>
            <div class='col-md-6'></div>
            <div class='col-md-6'></div>
        </div>
    </div>
    <div class='col-md-6'></div>
</div>
<div class='row'>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
</div>

例如：http://jsfiddle.net/ajx8m5k3/

Answer 2

对于这种特定情况，最简单的解决方案是在包含大图像的列上使用bootstrap的pull-right类。

<div class="container">
  <div class="row">
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-6 nopadding pull-right"><img class="img-responsive" src="http://placekitten.com/g/300/300"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
  </div>
</div>

Answer 3

您可能需要缩放图像以适合容器。 e.g。

<img class="img-responsive" src="img/karen_big.png" width="100%" height="100%">

Bootstrap将一个大图像与四个较小的图像对齐

3 个答案: