Bootstrap 分屏

Question

我想将我的 html 页面分成两个表格，中间有按钮。我想为按钮设置固定宽度（例如，每个屏幕尺寸的两个表格之间的距离为 40 像素）。表格必须具有相同的宽度，并且必须水平填充屏幕。如何使用 Bootstrap 创建此布局？

Answer 1

在container或container-fluid内：

<div class="row">
  <div class="col-xs-5">
    TABLE 1
  </div>
  <div class="col-xs-2">
    BUTTONS
  </div>
  <div class="col-xs-5">
    TABLE 2
  </div>
</div>

并检查 documentation 以了解如何根据需要创建表格和按钮

Answer 2

例如，您需要使用一些自定义代码。

<div class="el">
  <div class="elLeft">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="elbtn">
    <a class="btn btn-info" href="#" role="button"> &lt; </a>
    <a class="btn btn-info" href="#" role="button"> &gt; </a>
  </div>
  <div class="elRight">

    <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>


</div>

css

.el {
  display: table;
  width: 100%;
}

.elLeft,.elRight,.elbtn {
  display: table-cell;
}

.elbtn {
  padding: 0 15px;
  vertical-align: middle;
  width: 80px;
}

.elbtn .btn {
  display: block;
  width: 45px;
  margin: 5px auto;
}

Demo here

Bootstrap 分屏

Bootstrap devided screen

css

twitter-bootstrap

angular-ui-bootstrap

twitter-bootstrap-3