Div 拆分窗格，最小宽度

Question

我想要两个 50% div，但是第一个 div 的内容有一个最小大小。

<div class="col-xs-6">
<div style="min-width:1000px">
<label>In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the</label>
    </div>
</div>
<div class="col-xs-6">
    <label>TEST</label>
</div>

对于此代码段，第一个 div 根本不是 50%，因为其内容的最小宽度。

如何在第一个 div 上强制使用 50% 大小？（当然有水平滚动条）

Answer 1

您可以在父 div 上使用 CSS 网格并将其设置为两个相等的列。

display: grid;
grid-template-columns: repeat(2, 1fr);

如果你包含你的代码，我将能够看到你目前拥有的内容并提供更好的解决方案。

Answer 2

在您的第一列上应用 overflow:auto;。我使用选择器 :first-child。但我建议您创建一个 class .overflow-auto{ overflow:auto;}，就像在 Bootstrap 4.

中所做的那样

演示：

.col-xs-6:first-child{
  overflow:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-xs-6">
    <div style="min-width:1000px">
      <label>In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the</label>
      </div>
  </div>
  <div class="col-xs-6">
      <label>TEST</label>
  </div>
</div>

Answer 3

要做到这一点，你可以使用 overflow:scroll 添加滚动条，如果你想删除由列创建的填充，你可以在要使用的行中使用 row-n-gutters class列之间的整个 space。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head><!-- 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">

<!-- 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>
</head>
<div class="row row-no-gutters">
  <div class="col-xs-6" style="overflow:scroll">
    <div style="min-width:1000px">
      <label>In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the</label>
    </div>
  </div>
  <div class="col-xs-6">
      <label>TEST</label>
  </div>
</div>

Div 拆分窗格，最小宽度

Div split pane, with min-width

html

css

twitter-bootstrap

twitter-bootstrap-3