当屏幕进行缩放时，如何在同一行中固定引导 div？答案

【问题标题】：How can be fixed bootstrap divs in same line when screen makes zoom?当屏幕进行缩放时，如何在同一行中固定引导 div？
【发布时间】：2017-08-14 18:34:23
【问题描述】：

我有两个 div，每个 div 都有一个表格。 Nn 100% 缩放，它们看起来很正常。当我将缩放设置为 150% 时，自然而然，第二个表格在下一行移动。

我想为所有缩放选项在同一行放置两个 div。它可以是每个 div 的滚动条，但我希望它永远不会在下一行移动。有可能吗？

这些是我的代码片段：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <div class="row table-responsive col-md-12">
            <div class="col-md-4">

                <table class="table">
                    <tbody>
                    <tr>
                        <th>Colum 1</th>
                        <th>Colum 2</th>
                        <th>Colum 3</th>
                    </tr>
                    <tr >
                        <td>Row 1 - Field1</td>
                        <td>Row 1 - Field2</td>
                        <td>Row 1 - Field3</td>
                    </tr>
                    <tr >
                        <td>Row 2 - Field1</td>
                        <td>Row 2 - Field2</td>
                        <td>Row 2 - Field3</td>
                    </tr>
                    <tr >
                        <td>Row 3 - Field1</td>
                        <td>Row 3 - Field2</td>
                        <td>Row 3 - Field3</td>
                    </tr>
                </tbody></table>
            </div>
            <div class="col-md-8">
                <table class="table">
                    <tbody>
                    <tr>
                        <th>Colum 1</th>
                        <th>Colum 2</th>
                        <th>Colum 3</th>
                        <th>Colum 4</th>
                        <th>Colum 5</th>
                        <th>Colum 6</th>
                    </tr>
                    <tr >
                        <td>Row 1 - Field1</td>
                        <td>Row 1 - Field2</td>
                        <td>Row 1 - Field3</td>
                        <td>Row 1 - Field4</td>
                        <td>Row 1 - Field5</td>
                        <td>Row 1 - Field6</td>
                    </tr>

                </tbody></table>
            </div>
        </div>    
</html>

还有我的截图：

【问题讨论】：

标签： css twitter-bootstrap html-table

【解决方案1】：

尝试将您的 HTML 代码调整为以下内容：

 <div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-4">
            <div class="table-responsive">
                <table></table>
            </div>
        </div>
        <div class="col-md-8 col-sm-8 col-xs-8">
            <div class="table-responsive">
                <table class="table"></table>
            </div>
        </div>
    </div>
 </div>

【讨论】：

嘿嘿，这正是我需要的！！非常感谢！