时间戳

首页 > 解决方案 > 引导网格未中断或无法正确显示的问题

html - 引导网格未中断或无法正确显示的问题

问题描述

当涉及到网格时，我的页面上的 boostrap 错误让我非常头疼。我知道我已经尽我所能去弄清楚，并且花了无数个小时尝试不同的东西，但都无济于事。我有以下代码给我带来问题。如果您想查看该站点的实际运行情况，它位于此处：示例页面

<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 列宽。

标签： htmlcsstwitter-bootstrapstackcss-grid

解决方案

Bootstrap 网格以连续 12 列的方式工作。您可以根据需要将它们分开 - 对于两列，您设置两个divs col-md-6（对于中等分辨率，因此md）。因此，如果您想为小屏幕和超小屏幕设置 2 列，为中屏幕设置 4 列，让我们说为大屏幕设置 6 列，您的代码将如下所示：

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

推荐阅读