我想要兩個 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% 大小？（當然有水平滾動條）
uj5u.com熱心網友回復：
您可以在父 div 上使用 CSS Grid 并將其設定為兩個相等的列。
display: grid;
grid-template-columns: repeat(2, 1fr);
如果您包含您的代碼，我將能夠查看您當前擁有的內容并提供更好的解決方案。
uj5u.com熱心網友回復：
應用于您的第一列overflow:auto;。我使用選擇器:first-child。但我建議您創建一個類，.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>uj5u.com熱心網友回復：
為此，您可以添加滾動條overflow:scroll，如果您想洗掉由列創建的填充，您可以使用row-n-gutters行中的類來使用列之間的整個空間。
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/317290.html