如何使用Bootstrap设置主 - 详细信息页面？

Question

我在设置＆＃34; master-detail＆＃34;时遇到了问题。使用Bootstrap查看3.我附上了特定布局的图片我试图获取：

我创建了一个div，.row跨越了标题的12列，然后是另一个div.row，其中div.col-md-4和div.col-md-8为两列。但显然这并没有实现我所寻求的目标。我尝试过使用position属性，但它似乎与Bootstrap CSS冲突，而且我总是得到混乱的文本。

非常感谢您提前告诉我们您是否希望我提供有关我所寻找内容的更多详情。希望这张照片很清楚。

Answer 1

您正在寻找

position: fixed;

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

对于顶部元素（例如，您的导航栏），您可以设置：

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 -->

希望有所帮助。