css - 处理 cols 和 bootstrap 网格

Question

目前我在页面上有 col-sm-5 和 col-sm-7 网格，如下所示

<section class="site-content site-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-5 site-block">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <td><strong>test</strong></td>
                            <td class="text-right">test</td>
                        </tr>
                        <tr>
                            <td><strong>test</strong></td>
                            <td class="text-right">test</td>
                        </tr>   
                        <tr>
                            <td><strong>test:</strong></td>
                            <td class="text-right">test</td>
                        </tr>
                        <tr>
                            <td><strong>test:</strong></td>
                            <td class="text-right">test</td>
                        </tr>       
                    </tbody>
                </table>
            </div>
            <div class="col-sm-7 site-block">
                <h3 class="site-heading">
                    <p><strong>test </strong></p>
                </h3>
                <p><hr></p>                                     
                <p><strong>test</strong></p>
                    <div class="row">
                        <div class="col-sm-4">
                            <h3>test1</h3>
                               <hr>
                                 <p><a href="#" class="btn btn-info btn-warning"><span class="glyphicon glyphicon-file"></span> test</a></p>
                        </div>
                        <div class="col-sm-4">
                            <h3>test2</h3> <hr>
                                 <p><a href="#" class="btn btn-info btn-warning"><span class="glyphicon glyphicon-file"></span> test</a></p>
                        </div>
                        <div class="col-sm-4">
                            <h3>test3</h3>
                            <hr>
                              <p><a href="#" class="btn btn-info"><span class="glyphicon glyphicon-file"></span> test </a></p>
                        </div>
                    </div>                                                  
            </div>
        </div>
    </div>
</section>

为了更好地理解是什么产生了这个网格，这里是 JSFIDDLE所以现在我想将 col-sm-4 移动到 `col-sm-7 中 site-heading 的右侧。目前还不清楚我想要什么，所以这是它的形象:

Answer 1

请检查这个，看看是否是您需要的。我已将主网格更改为 col-sm-4 和 col-sm-8，然后在里面添加了一些。

<section class="site-content site-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-4 site-block">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <td><strong>test</strong></td>
                            <td class="text-right">test</td>
                        </tr>
                        <tr>
                            <td><strong>test</strong></td>
                            <td class="text-right">test</td>
                        </tr>   
                        <tr>
                            <td><strong>test:</strong></td>
                            <td class="text-right">test</td>
                        </tr>
                        <tr>
                            <td><strong>test:</strong></td>
                            <td class="text-right">test</td>
                        </tr>                             
                    </tbody>
                </table>
            </div>
            <div class="col-sm-8 site-block">
                <div class="row">
                    <div class="col-sm-6">
                        <h3 class="site-heading">
                            <p><strong>test</strong></p></h3>
                            <p><hr></p>
                            <p><strong>test</strong></p>
                     </div>
                     <div class="col-sm-4">
                        <h3>test</h3>
                        <hr>
                        <p><a href="#" class="btn btn-info btn-warning"><span class="glyphicon glyphicon-file"></span> test</a></p>
                        <h3>test</h3> <hr>
                        <p><a href="#" class="btn btn-info btn-warning"><span class="glyphicon glyphicon-file"></span> test</a></p>
                     </div>                                             
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <h3>test</h3>
                    <hr>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="well">6</div>
                        </div>
                        <div class="col-md-3">
                            <div class="well">7</div>
                        </div>
                        <div class="col-md-3">
                            <div class="well">8</div>
                        </div>
                        <div class="col-md-3">
                            <div class="well">8</div>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

DEMO JSFIDDLE