Bootstrap元素對齊

Question

我是新手bootstrap，我試圖發現如何將紅色（在照片中）圈出的對象向右對齊。

這裏是原來的資源文件： https://mega.co.nz/#!HQcTRART

圖片的什麼我想要實現： http://postimg.org/image/n4ke2cfd3/

Answer 1

你應該知道如何引導工作。

• Bootstrap使用網格佈局。最外層的div必須有.container類。
• 裏面的.container，你可以有多少行。每行必須有一個row類。
• 引導程序中的每一列必須位於.row之內。 Bootstrap支持12列布局，因此當您拆分爲x列時，所有列寬的總和必須等於12. 例如：col-sm-9和col-sm-3。因此9 + 3 = 12

運行下面的代碼，然後單擊全屏

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<div class="container"> <!-- container --> 
 
    <div class="row">  <!-- row --> 
 
    <div class="col-sm-9"> <!-- column -->  
 
     <table class="table"> 
 
     <thead> 
 
      <tr> 
 
      <th>Firstname</th> 
 
      <th>Lastname</th> 
 
      <th>Email</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>John</td> 
 
      <td>Doe</td> 
 
      <td>john@example.com</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Mary</td> 
 
      <td>Moe</td> 
 
      <td>mary@example.com</td> 
 
      </tr> 
 
      <tr> 
 
      <td>July</td> 
 
      <td>Dooley</td> 
 
      <td>july@example.com</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    <div class="col-sm-3"> <!-- column --> 
 
     <ul class="nav nav-pills nav-stacked"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Menu 1</a></li> 
 
     <li><a href="#">Menu 2</a></li> 
 
     <li><a href="#">Menu 3</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>