Bootstrap将一个大图像与四个较小的图像对齐
Mia*_*Mia 1 html html5 css3 twitter-bootstrap twitter-bootstrap-3
我正在尝试使用Bootstrap创建一个网页.这就是我想要的样子:
但是我无法让图片对齐.这是我到目前为止:
我尝试在我的列中添加无填充和无边距,但这似乎没有做到这一点.这是我到目前为止的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;
}
提前致谢!
你的标记看起来应该更像是为了得到正确的对齐方式:
+---------+----------+
|+-------+| |
|| | || |
|+---+---|| |
|| | || |
|+---+---+| |
+----+----+-----+----+
| | | | |
+----+----+-----+----+
或者翻译成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/
- 如果不对你的答案给予肯定,可以添加`nopadding`,但第一个`col-md-*`将获得所需的结果.示例:http://jsfiddle.net/ajx8m5k3/1/ (3认同)
- 并且只是`.nopadding {padding:0; 我会做的 (2认同)