使5幅图像在3列内对齐

Question

我用的是鞋带。

我有一个集装箱，然后是一排。行中有一个图像列表-md-3。行中有一个商品列表-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

我想在这里摆弄一下：https://jsfiddle.net/ced41zLy/

Answer 1

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

​

<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>

​

注意：，您可以使用Bootstrap的..img回应，这样您就不必对宽度大惊小怪了。