我对CSS和bootstrap知之甚少。我在一个页面上有多个div，并试图根据我们的旧网站让它们排成一排。
我遇到的问题是右边的一个div更大，左边的div由于右边的一个而有大量白色：（见屏幕截图）
下面是我的UI代码：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-6 col-sm-6">
<h5><b>PRODUCER MAILINGS AND IMPORTANT UPDATES</b></h5>
<hr class="fa-border border-primary border-1" />
<ul class="list-unstyled">
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> Name1</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
</ul>
</div>
<div class="col-6 col-sm-6">
<h3><b>XXXXXX Mitigation Credits</b></h3>
<hr class="fa-border border-primary border-1" />
<ul class="list-unstyled">
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes herey</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
</ul>
</div>
<div class="w-100"></div>
<div class="col-6 col-sm-6" style="vertical-align:top">
<h3><b>OTHER MANUALS AND PROCEDURES</b></h3>
<hr class="fa-border border-primary border-1" />
<ul class="list-unstyled">
<li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
</ul>
</div>
</div>尝试移动的东西和各种CSS的东西从谷歌
1条答案
按热度按时间jgovgodb1#
Bootstrap的网格是基于行和列的。每行由12列组成，您的示例显示了一行，其中有两个六列宽的div。然后在其下方有另一个六列的div。要使较低的div位于所需的div下方，您需要将其移动到列中，而不是位于行下方。
如果您打算继续使用Bootstrap，我建议您熟悉how it works。