Question

我正在使用bootstrap。

我有一个容器然后一排。该行包含col-md-3中的图像列表。该行包含col-md-9中的文章列表。

如果图像移动到屏幕顶部（因为屏幕较小），我希望它们根据需要水平显示在尽可能多的行中。当图像位于屏幕左侧时，我希望它们垂直对齐。

我该怎么做？

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <img src="https://www.coca-cola.com.au/bundles/cokeweb/uikit/img/logos/coke/logo-small-retina.png" width="170" height="50" border="0" alt="Coke">
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Mcdonalds-90s-logo.svg/2000px-Mcdonalds-90s-logo.svg.png" width="70" height="50" border="0" alt="Mcdonalds">
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Hershey_logo.svg/2000px-Hershey_logo.svg.png" width="180" height="50" border="0" alt="Hershey">
       <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Frito_Lay_Logo.png/975px-Frito_Lay_Logo.png" width="70" height="50" border="0" alt="Frito Lay">
       <img src="https://jobdevelopers.files.wordpress.com/2015/01/levis-logo1.png" width="90" height="50" border="0" alt="Levis">
       <img src="http://www.shoutbusiness.co.uk/wp-content/uploads/2015/05/Black-Decker-logo.jpg" width="100" height="50" border="0" alt="Black and Decker">
    </div>
    <div class="col-md-9">
      <p>python prints alot of articles here</p>
    </div>
  </div>

编辑1

我想在这里制作一个jsfiddle： https://jsfiddle.net/ced41zLy/

Answer 1

使用列创建行并设置断点：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-3">
      <div class="row">
        <div class="col-xs-4 col-md-12">
          <img class="img-responsive" src="https://www.coca-cola.com.au/bundles/cokeweb/uikit/img/logos/coke/logo-small-retina.png" alt="Coke">
        </div>
        <div class="col-xs-4 col-md-12">
          <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Mcdonalds-90s-logo.svg/2000px-Mcdonalds-90s-logo.svg.png" alt="Mcdonalds">
        </div>
        <div class="col-xs-4 col-md-12">
          <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Hershey_logo.svg/2000px-Hershey_logo.svg.png" alt="Hershey">
        </div>
      </div>
      <div class="row">
        <div class="col-xs-4 col-md-12">
          <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Frito_Lay_Logo.png/975px-Frito_Lay_Logo.png" alt="Frito Lay">
        </div>
        <div class="col-xs-4 col-md-12">
          <img class="img-responsive" src="https://jobdevelopers.files.wordpress.com/2015/01/levis-logo1.png" alt="Levis">
        </div>
        <div class="col-xs-4 col-md-12">
          <img class="img-responsive" src="http://www.shoutbusiness.co.uk/wp-content/uploads/2015/05/Black-Decker-logo.jpg" alt="Black and Decker">
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-9">
      <p>python prints alot of articles here</p>
    </div>
  </div>
</div>

＆＃13;

注意：您可以使用Bootstrap＆＃39; .img-responsive，这样您就不必为宽度而烦恼。

使5个图像在3列内对齐

1 个答案: