gpt4 book ai didi

css - 当屏幕缩放时,如何在同一行固定 Bootstrap div?

转载 作者:太空宇宙 更新时间:2023-11-04 08:19:09 24 4
gpt4 key购买 nike

我有两个 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>

和我的截图:

enter image description here enter image description here

最佳答案

尝试将您的 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>

关于css - 当屏幕缩放时,如何在同一行固定 Bootstrap div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45665907/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com