html - 如何使 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

正如您从示例中看到的那样，右拉类应该可以正常工作。您可能对表的父 div 或某些 col-sm-11 类的 padding-right 有一些问题？

<!-- 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>