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

Question

我有一个包含四个项目的引导程序网格。我的问题是，位置3中的项目跳到新行，并且没有显示在网格布局中。

这是使用以下代码生成的内容的屏幕截图

<!-- 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