Bootstrap列无法正常运行？

Question

我想要一个具有顶部，左侧和右侧部分的master_page。我的左右部分有问题...左边像我想要的那样与屏幕齐平，右边部分根本没有。

<div class="col-lg-12">
  <div class="row">
    <div class="col-4">
      <aside>This is the left content</aside>
      <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
        <li>Test 5</li>
        <li>Test 6</li>
      </ul>
    </div>

    <div class="col-4">
      <asp:ContentPlaceHolder ID="mainContent" runat="server">
        <p>Default Main Content</p>
      </asp:ContentPlaceHolder>
    </div>

    <div class="col-4">
      <aside>Right Content</aside>
      <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
        <li>Test 5</li>
        <li>Test 6</li>
      </ul>
    </div>
  </div>
</div>

在此图像中，您可以看到仍然有大量的空间。

如果我尝试进一步增加列大小，那么正确的内容就会降到下面，因为4 + 4 + 4大于12 ...这是有道理的，但这应该行得通，不是吗？

Answer 1

我认为这是正确的结果。 因为您没有设置要在右侧显示的文本。 您可以通过提供背景颜色来验证其位置是否正确。

并且代码必须是这样

<aside class="float-right">
  <ul>...</ul>
</aside>