小编Mia*_*Mia的帖子

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

我正在尝试使用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>
Run Code Online (Sandbox Code Playgroud)

这里是我添加的没有填充和没有边距的CSS:

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
Run Code Online (Sandbox Code Playgroud)

提前致谢!

html html5 css3 twitter-bootstrap twitter-bootstrap-3

1
推荐指数
1
解决办法
1388
查看次数