Bootstrap分屏

Question

我想将html页面分成两个表，中间有一个按钮。我想为按钮设置固定宽度（例如，每个屏幕尺寸的两个表之间的距离为40 px）。表必须具有相同的宽度，并且必须水平填充屏幕。如何使用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