引导程序元素对齐

Question

我是bootstrap的新手，我正在努力探索如何将（照片中）用红色圈出的对象向右对齐。

以下是原始资源文件：https://mega.co.nz/#！HccTRART

我想要实现的目标：http://postimg.org/image/n4ke2cfd3/

Answer 1

您应该知道Bootstrap是如何工作的。

• 引导使用网格布局。最外层的div必须有一个.container类
• 在.container中，可以有任意多的行。每一行都必须有一个row类
• bootstrap中的每一列都必须位于.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>[e-mail]</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[e-mail]</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[e-mail]</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>