html - 引导左侧边栏，内容右侧

Question

我正在尝试将布局设置为在左侧显示侧边栏，然后在右侧显示内容，问题是内容侧每行显示 4 个产品，而不是 3

<div class="container">
    <div class="row">
            <div class="col-sm-3" id="leftCol">

                <div class="well"> 
                <ul class="nav nav-stacked" id="sidebar">
                  <li><a href="#sec1">Section 1</a></li>
                  <li><a href="#sec2">Section 2</a></li>
                  <li><a href="#sec3">Section 3</a></li>
                  <li><a href="#sec4">Section 4</a></li>
                </ul>
                </div>

            </div>

            <div class="col-sm-9">
              <?php echo "<div class='col-sm-3'>
              content here 3 products per row (currently showing 4)
              </div>" ?>
            </div>
    </div>
</div>

Answer 1

Bootstrap 适用于 12 的网格系统，因此将类从 col-sm-3 更改为至col-sm-4 (12/3 = 4)

        <div class="col-sm-9">
          <?php echo "<div class='col-sm-4'>    <!--change class to col-sm-4-->
          content here 3 products per row (currently showing 4)
          </div>" ?>
        </div>

希望这有帮助:)