使用引导 css 左对齐 div答案

【问题标题】：Left align div using bootstrap css使用引导 css 左对齐 div
【发布时间】：2019-07-17 15:44:03
【问题描述】：

我有以下 div，我正在尝试按特定顺序对齐。我想让它们形成两行，div 总是左对齐。

我这里有相同的代码：Code on Plnkr

这是一个sn-p的代码：

<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
   <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>I have to be left aligned</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>

同样的实时预览在这里：Live preview

如何使第四个 div 左对齐。

【问题讨论】：

可能想看看这个stackoverflow.com/questions/19196082/…

标签： html css twitter-bootstrap-3

【解决方案1】：

您可以将前三列包装在 row 中，然后将最后一列包装在另一个 row 中。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  </head>

  <body>
    <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <table class="table">
            <tr class="info"><td><b>Row 1</b></td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td></td></tr>
        </table>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <table class="table">
            <tr class="info"><td><b>Row 1</b></td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td></td></tr>
        </table>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
       <table class="table">
            <tr class="info"><td><b>Row 1</b></td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td></td></tr>
        </table>
    </div>
        </div>
    <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12" style="float:left;">
        <table class="table">
            <tr class="info"><td><b>I have to be left aligned</b></td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td></td></tr>
        </table>
    </div>
    </div>
  </body>

</html>

这里是 plunker：http://plnkr.co/edit/8SSAsT76bHNdSvThhl0v?p=preview

【讨论】：

简单明了。谢谢
不客气！进一步查看引导程序的网格。容器、行和列。您会发现它对未来非常有用！
这可行，但移动视图仍无法按预期工作。当移动视图使用“col-sm-*”时，第三个 div 和第四个 div 会堆叠起来，而不是并排对齐。
找到了问题的解决方案。在这里添加相同的内容。

【解决方案2】：

我用下面的代码让它工作了。

<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6 col-xs-12">
   <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>I have to be left aligned</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>

在这里，我有选择地使用引导程序的明确修复来获得“响应列重置”。更多这里Responsive column resets

【讨论】：