ブートストラップ分割画面

Question

ボタンを中央に2つのテーブルに分割したい。固定幅をボタンに設定する（たとえば、すべての画面サイズで2つの表の間に40ピクセルの距離）。テーブルは同じ幅でなければならず、画面を水平に塗りつぶす必要があります。ブートストラップでこのレイアウトを作成するにはどうすればよいですか？

Answer 1

をしたいとあなたはいくつかのカスタムコードのためにプレーする必要があるテーブルやボタンを作成する方法を参照してくださいdocumentationをチェック例。

<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

Answer 2

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> 

、あなたが