Question

当涉及到网格时，我的页面上出现了boostrap错误，这让我非常头疼。我知道我已经竭尽所能，花了无数小时尝试不同的事情，但都无济于事。我有以下代码给我一些问题。如果您想查看运行中的网站，请访问以下网址：Sample Page

<div class="container">
    <div class="row">
        <div class="prodStyles col-xs-12">
            <h2>ALL PRODUCT STYLES</h2>
        </div>
    </div>

<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodImage">
            <img src="images/roll/king-blue.png" alt="cblue" class="alignnone" />
       </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodStyles">
            <ul>
                <li><span>KINGS</span></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>

            </ul>
        </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodImage">
            <img src="/images/roll/king-blue.png" alt="blue" class="alignnone" />
       </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodStyles">
            <ul>
                <li><span>KINGS</span></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>

            </ul>
        </div>
    </div>
</div>
</div>
</div>

我能够将其关闭，但是对于小屏幕来说，它并没有中断我想要的位置。我希望它的最小宽度始终为2列，中型及以上的屏幕至少应为4列。

Answer 1

我认为您只需将col-md-6更改为col-md-3。

<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">

Answer 2

Bootstrap网格的工作方式是连续有12列。然后根据需要进行划分-对于两列，您用div设置了两个col-md-6（对于中等分辨率，因此为md）。因此，如果您要在小型和超小型屏幕上使用2列，在中型屏幕上使用4列，而对于大屏幕则使用6列，则您的代码应如下所示：

<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">

Answer 3

我认为您在第二行的第一个col元素之后缺少一个闭包div。并在外部有1个额外的关闭区域。试试这个：

<div class="container">
<div class="row">
    <div class="prodStyles col-xs-12">
        <h2>ALL PRODUCT STYLES</h2>
    </div>
</div>

<div class="row">

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodImage">
            <img src="images/roll/king-blue.png" alt="cblue" class="alignnone" />
        </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodStyles">
            <ul>
                <li><span>KINGS</span></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodImage">
            <img src="/images/roll/king-blue.png" alt="blue" class="alignnone" />
        </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodStyles">
            <ul>
                <li><span>KINGS</span></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
</div>

Bootstrap网格无法正常显示或出现问题

3 个答案: