Question

我希望将我的图像与引导程序对齐，我无法使用引导程序，因为用户可以选择调整图像大小并使用Bootstrap类“col-md，col-xs等”。用户无法调整图像宽度，我尝试创建宽度为100％的div然后我为每个图像添加宽度：25％（我想要每行4个图像），图像尺寸正确但不是正确的位置。

这就是我现在所拥有的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <h2>Without Bootstrap</h2>
    <div class="">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  </div>
</div>

以下是我想要的内容与我的内容

的示例

Code

提前致谢。

Answer 1

如果向包含图像的div添加一个类，则可以使用：

display: inline-block;

我在您的文件中添加了CSS：

.blockRow {
  display: inline-block;
  padding-right: 2.2em;
}

和HTML：

<div class="container">
  <h2>With Bootstrap</h2>
  <div class="row">
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  </div>
  <hr />
  <h2>Without Bootstrap</h2>
   <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
</div>

你必须使用填充来获得它想要的样子：http://codepen.io/anon/pen/pEobEg

对齐像Bootstrap这样的图像

1 个答案: