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>[email protected]</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Mary</td> 
 
      <td>Moe</td> 
 
      <td>[email protected]</td> 
 
      </tr> 
 
      <tr> 
 
      <td>July</td> 
 
      <td>Dooley</td> 
 
      <td>[email protected]</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>