如何使Bootstrap组件正确对齐？

Question

我有一个响应表和一个按钮，现在我想使它们正确对齐，所以我要这样做：

<div class="container-fluid" id="main">
    <button type="button" class="btn btn-primary btn-sm pull-right">upload</button>
    </br>
    <div class="table-responsive">
        <table class="table table-striped">
             <!-- table -->
        </table>
    </div>
</div>

我将pull-right添加到按钮，页面如下所示： 如何使按钮和表格正确对齐？

Answer 1

从示例中可以看到，pull-right类应该正常工作。您可能对表格的父div的padding-right有问题，或者是某些col-sm-11类？

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container-fluid" id="main">
    </br></br>
    <button type="button" class="btn btn-primary btn-sm pull-right">upload</button>
    </br></br>
    <div class="table-responsive">
        <table class="table table-striped">
             <tr>
               <td>1</td><td>2</td><td>3</td>
             </tr>
             <tr>
               <td>1</td><td>2</td><td>3</td>
             </tr>
             <tr>
               <td>1</td><td>2</td><td>3</td>
             </tr>
             <tr>
               <td>1</td><td>2</td><td>3</td>
             </tr>
             <tr>
               <td>1</td><td>2</td><td>3</td>
             </tr>
        </table>
    </div>
</div>

Answer 2

使用col-sm-offset。

<div class="container-fluid col-sm-offset-2" id="main">
    <button type="button" class="btn btn-primary btn-sm pull-right">upload</button>
    </br>
    <div class="table-responsive">
        <table class="table table-striped">
             <!-- table -->
        </table>
    </div>
</div>

Answer 3

默认情况下，td个项目向左对齐，因此将其覆盖。

#main table tr td:last-child{
        text-align: right !important;
    }