gpt4 book ai didi

html - Bootstrap 将一张大图像与四张小图像对齐

转载 作者:行者123 更新时间:2023-11-28 04:11:21 25 4
gpt4 key购买 nike

我正在尝试使用 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;
}

提前致谢!

最佳答案

你的标记应该看起来更像这样以获得正确的对齐方式:

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

或者翻译成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/

关于html - Bootstrap 将一张大图像与四张小图像对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27610155/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com