Question

我有一个包含四个项目的bootstrap网格。我的问题是位置3中的项目跳转到一个新行并且不显示在网格布局中。

This is a screen shot of what is produced with the following code

<!-- Position One -->
    <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="stock-grid-item">
            <a href="item1.html">
                <img src="/images/image1.jpg" alt="" />
            </a>
        </div>

        <div class="stock-grid-details">
            <p class="name"><a href="item1.html">Item One Title</a></p>
            <p class="price">$10.00</p>
        </div>
    </div>

<!-- Position Two -->
    <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="stock-grid-item">
            <a href="item2.html">
                <img src="/images/image2.jpg" alt="" />
            </a>
        </div>

        <div class="stock-grid-details">
            <p class="name"><a href="item2.html">Item Two Title</a></p>
            <p class="price">$10.00</p>
        </div>
    </div>

<!-- Position Three -->
    <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="stock-grid-item">
            <a href="item3.html">
                <img src="/images/image3.jpg" alt="" />
            </a>
        </div>

        <div class="stock-grid-details">
            <p class="name"><a href="item3.html">Item Three Title</a></p>
            <p class="price">$10.00</p>
        </div>
    </div>

<!-- Position Four -->
    <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="stock-grid-item">
            <a href="item4.html">
                <img src="/images/image4.jpg" alt="" />
            </a>
        </div>

        <div class="stock-grid-details">
            <p class="name"><a href="item4.html">Item Two Title</a></p>
            <p class="price">$10.00</p>
        </div>
    </div>

Answer 1

尝试将代码包装在其中。

<div class="container">
    <div class="row">
        // your codes here
    </div>
</div>

我还对您的代码进行了一些调整，以消除对代码的不当使用。

请参阅此jsFiddle

bootstrap列跳过col-xs-6上的一行

1 个答案: