html - 如何使用 Bootstrap 设置主从页面？

Question

我在使用 Bootstrap 3 设置“主从” View 时遇到问题。我附上了一张我试图获得的特定布局的图片:

我创建了一个包含 .row 的 div，它跨越了标题的 12 列，然后是另一个包含 div.col-md 的 div.row -4 和 div.col-md-8 用于两列。但显然这并没有达到我想要的。我试过使用 position 属性，但它似乎与 Bootstrap CSS 冲突，而且我总是得到困惑的文本。

非常感谢您，如果您希望我提供有关我正在寻找的内容的更多详细信息，请告诉我。希望图片清晰。

Answer 1

你在找

position: fixed;

这确保元素相对于视口(viewport)始终是静态的。然后，您将使用相对定位属性将其放置在您想要的位置。

对于顶部元素(例如，您的导航栏)，您可以设置:

top: 0;

对于底部元素，可以设置:

bottom: 0;

所以，像这样:

.row, .col-md-4, .col-md-8 {
    border: 2px solid pink; /* For showing the div borders */
}

.row.main-content {
    background-color: blue;
    height: 300px;
    margin-top: 20px; /* Needs to match the height of .row.top */
 }

 .row.top {
    position: fixed;
    top: 0;
    height: 20px;
    width: 100%;
    background-color: red;
    z-index: 9999;
 }
    
 .row.bottom {
    position: fixed;
    bottom: 0;
    height: 20px;
   width: 100%;
    background-color: green;
    z-index: 9999;
 }

.scrollable {
    overflow-y: scroll;
    height: 300px; /* May need to be set somehow */
  }

<div class="container-fluid"><!-- To get it to take up the whole width -->
      
      <div class="row top">

      </div><!-- row -->

      <div class="row main-content">
        
        <div class="col-md-4">
        
            <div class="sub-header">
            </div>

            <div class="scrollable">
                <!-- menu items here -->
            </div>

            <div class="sub-footer">
            </div>

        </div>

        <div class="col-md-8 scrollable">
            <!-- Product detail goes here -->
        </div>

      </div><!-- row -->

      <div class="row bottom">

      </div><!-- row bottom -->

    </div><!-- container-fluid -->

希望对您有所帮助。