如何将col-md-4与col-md-12对齐用于任何设备

Question

我怎么能解决这个问题，我不想要合适的空间，我正在移动窗户检查所有位置，所以我看到了这个，我试图解决它，但我无法解决这个问题。吨。

第一个框是col-md-12，其他框在同一行中是col-md-4（4而不是3）。

代码：

<div class="row">
    <div class="container">
        <div class="col-md-12">
            <h1>title</h1>
            <form>
                ...
            </form>
        </div>

        <div class="col-md-4">
            <div class="pimg">
                <img src="" />
                <div class="description">1</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="pimg">
                <img src="" />
                <div class="description">2</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="pimg">
                <img src="" />
                <div class="description">3</div>
            </div>
        </div>
    </div>
</div>

输出

Answer 1

您的代码错误，.container出现在.row之前，您必须使用.col-md-4

包裹.row

为小型设备添加.col-sm-4，为小型设备添加.col-xs-4。

请参阅Bootstrap Docs

段

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>title</h1>
      <img class="img-responsive" src="//lorempixel.com/1200/900" />  
      <form>
        ...
      </form>
      
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <div class="pimg">
        <img class="img-responsive" src="//lorempixel.com/600/300" />
        <div class="description">1</div>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4">
      <div class="pimg">
       <img class="img-responsive" src="//lorempixel.com/600/300" />
        <div class="description">2</div>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4">
      <div class="pimg">
        <img class="img-responsive" src="//lorempixel.com/600/300" />
        <div class="description">3</div>
      </div>
    </div>
  </div>
</div>