html - 如何将任何设备的 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 >.行

为小型设备添加了 .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>