javascript - 最佳实践——创建具有 3 列的 Bootstrap 模板——左侧和右侧边栏

Question

我想要一种简单的方法来创建一个三列 Bootstrap 模板，该模板将具有 (1) 左侧边栏、(2) 中间/主要内容区域和 (3) 右侧边栏。

虽然在单个页面中创建 3 个 Bootstrap 列对我来说并不困难，但我的问题是如何在每个页面中包含相同的右侧和左侧边栏。

我知道我可以像这样在一个页面中创建 3 列

<div class = "container">
<div class = "row">
<div class = " col-lg-3"> Left column</div>
<div class = "col-lg-6"> Main/Middle column </div>
<div class = col-lg-3" Right column </div>
</div>
</div>

另外，我知道我可以在每一页上做这样的事情例如 index.php

<?php include 'left_sidebar.php' ?>

<div class = "container">
<div class = "row">
<div class = "col-lg-12"> Middle/main content area</div>
</div>
</div>

<?php include 'right_sidebar.php' ?>

其中 left_sidebar.php 和 right_sidebar.php 各包含一列。

但是，这需要我编写一些 CSS 和一些 JS 来将侧边栏保持在各自的左右位置。

我更愿意为所有三列使用核心 Bootstrap，而无需编写额外的 CSS 或 JS。有什么帮助吗？

Answer 1

将您的 php 包含在您的 col-3 div 中。

<div class = "container">
 <div class = "row">
  <div class = " col-lg-3"> 
   <?php include 'left_sidebar.php' ?>
  </div>
  <div class = "col-lg-6"> 
    Main/Middle column
  </div>
  <div class = col-lg-3">
  <?php include 'right_sidebar.php' ?>
  </div>
 </div>
</div>