如何为任何设备将 col-md-4 与 col-md-12 对齐答案

【问题标题】：how to align col-md-4 with col-md-12 for any device如何为任何设备将 col-md-4 与 col-md-12 对齐
【发布时间】：2020-10-19 17:09:56
【问题描述】：

我该如何解决这个问题，我不想要正确的空间，我正在移动窗口以检查所有位置，所以我看到了这个，我试图修复它，但我不能。

第一个框是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>

输出：

【问题讨论】：

您没有正确使用引导程序的网格。每行应总计为 12 列。另外，容器应该包含行，反之亦然，除非嵌套容器也包含行。
intercange 行和容器类

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你的代码是错误的，.container 在.row 之前，你必须用.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>

【讨论】：