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>

希望这有助于：）

Answer 2

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" />

 <xsl:template match="rows">
    <xsl:if test="row/field/@type='B'">
    <div class='panel'>panel header</div>
    <div class='panel-body'>
        <xsl:apply-templates select="row/field[@type='B']" mode="process" />
    </div>
    </xsl:if>
</xsl:template>

<xsl:template match="field[@type='B']" mode="process">
    [<xsl:value-of select="." />]
</xsl:template>

</xsl:stylesheet>

来源：http://getbootstrap.com/css/#grid-media-queries

boostrap左侧边栏，内容正确

2 个答案: