在页面上向上移动文本

Question

我对 CSS 和 bootstrap 知之甚少。我在一个页面上有多个 div，并试图根据我们的旧网站将它们排列起来。

我遇到的问题是右侧有一个 div 较大，而左侧的 div 由于右侧有大量空白：（参见屏幕截图）

这是我的用户界面代码：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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" />&nbsp;Name1</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;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" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes herey</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;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" />&nbsp;name goes here</li>
    </ul>
  </div>
</div>

尝试移动东西和来自谷歌的各种 CSS 东西

Answer 1

Bootstrap 的网格是基于行和列的。每行由 12 列组成，您的示例显示一行，有两个六列宽的 div。然后在其下方还有另一个六列 div。要使较低的 div 低于您需要的 div，您需要将其移至列中而不是行下方。

如果您打算继续使用 Bootstrap，我建议您熟悉一下它是如何工作的。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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" />&nbsp;Name1</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
    </ul>
    <div class="col-12 col-sm-12" 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" />&nbsp;name goes here</li>
      </ul>
    </div>
  </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" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes herey</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
    </ul>
  </div>