0

我创建的对象列表将显示在我的视图中。好吧，我想每行显示 3 或 4 个。当我显示 3 时，我使用class="span4"，当我显示 4 时，我使用class="span3"。虽然，当 div 溢出时span12，下一个对象将显示为错误的大小，如下所示：

显示错误

好吧，我希望第四个 div 显示在第一个 div 的正上方。我的代码是这样的：

<div class="span2">MENU</div>
<div class="span10 container-fluid">
    <div id="products" class="row-fluid"> 
    @foreach (Product product in Model)
    {
        <div class="span4 item-bordered text-center">
            <h3>@product.Name</h3>  
            <h6>@product.Description</h6>
        </div>
    }
    </div>
</div>

这是一个重现我的问题的 JSFiddle：http: //jsfiddle.net/Kiwanax/utPsh/

有人能帮我吗？谢谢！！！

4

2 回答 2

0

我不确定引导网格系统是否设计用于列表...我会尝试使用 div 代替。

<div id="products" class="row-fluid">      
    <div class="span4 item-bordered text-center">
        <h3>Pelúcias Angry Birds</h3>  
        <h6>As mais lindas pelúcias dos pássaros mais queridos do momento.</h6>
    </div>

    <!--etc-->

</div>

编辑：
此外，如果您的跨度加起来为 16，您将得到不希望的结果。所以我会坚持使用 3span4秒或 4span3秒。

编辑：
通过向网格跨度添加边框可能会遇到更多问题，因为它会将每个元素的宽度增加两倍（假设边框宽度为 1px）。因此，我将您的边框放在网格跨度 div 内的嵌套 div 上：

<div id="products" class="row-fluid">
    <div class="span4">
        <div class="item-bordered text-center">
            <h3>Pelúcias Angry Birds</h3>  
            <h6>As mais lindas pelúcias dos pássaros mais queridos do momento.</h6>
        </div>
    </div>

    <!--etc-->

</div>

编辑：

Bootstrap 网格系统不是为处理超过 12 个跨度而设计的，因此您必须更改生成 html 的方式来解决它。

我看到你正在使用 MVC。假设您使用的是 Razor，您将需要按照以下方式做一些事情：

<div id="products">
    <div class="row-fluid">
    @{int counter = 0;}
    @foreach (var toy in toys) 
    {
        if (counter > 0 && counter % 3 == 0) <!--check if it's the beginning of the next row-->
        { 
            @:</div> <!--terminate previous row-->
            @:<div class="row-fluid"> <!--start a new row-->
        }
        <div class="span4">
            <div class="item-bordered text-center">
                <h3>toy.Name</h3>  
                <h6>toy.Description</h6>
            </div>
        </div>
        counter++;
    }
    </div>
</div>
于 2013-04-23T20:02:02.203 回答
0

该类span4与 相结合，row-fluid旨在在一行中显示 3 个响应式元素。
要做你想做的事，只需添加一个新行并将第四个元素放入其中。 

<div class="row-fluid">      
    <ul id="products">
        <li class="span4 item-bordered text-center">
            <h3>Pelúcias Angry Birds</h3>  
            <h6>As mais lindas pelúcias dos pássaros mais queridos do momento.</h6>
        </li>

        <li class="span4 item-bordered text-center">
            <h3>Pelúcias Angry Birds</h3>  
            <h6>As mais lindas pelúcias dos pássaros mais queridos do momento.</h6>
        </li>

        <li class="span4 item-bordered text-center">
            <h3>Pelúcias Angry Birds</h3>  
            <h6>As mais lindas pelúcias dos pássaros mais queridos do momento.</h6>
        </li>
    </ul>
</div>
 <div class="row-fluid">
    <ul id="products">
        <li class="span4 item-bordered text-center">
            <h3>Pelúcias Angry Birds</h3>  
            <h6>As mais lindas pelúcias dos pássaros mais queridos do momento.</h6>
        </li>
    </ul>
</div>

我建议使用 divs 而不是 li's 来获得更轻的标记

或者您可以尝试从引导程序中覆盖左边距，将其设置为 0 并给出等效的右边距： 

 .item-bordered {
    border: 1px solid #ccc;
    margin-left:0px !important;
    margin-right:1.4%;
}

这是您更新的小提琴

于 2013-04-23T20:12:32.647 回答