Question

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

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

以下是代码片段：

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

Answer 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

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

在这里，我选择性地使用bootstraps的明确修复来获得响应列重置＆＃39;。更多Responsive column resets

使用bootstrap css左对齐div

2 个答案: