Question

我有下面的内容，我试图复制这个模型 - ＆gt; DoorPanelImage

我被困在如何让我的元素水平显示？我需要制作一个列表或另一个“表”吗？能够使用style完成它，但似乎我不需要。

这是我到目前为止所拥有的 - ＆gt;

<div id="Row1" class="row">
<div id="Door1" class="col-md-2 panel panel-primary" >
    <div id="Door1Head" class="panel-heading">
        <span class="badge">1</span>
        <h3 class="panel-title">RE031159</h3>
        <span class="glyphicon glyphicon-arrow-up"></span>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item">
                12315 Carregeenan WG-16 4000 lbs
            </li>
            <li class="list-group-item">
                1063545 Carp meal spread 1042 lbs
            </li>
        </ul>
    </div>
</div>
<div id="Door2" class="col-md-2">
    <span class="badge">2</span>
</div>
<div id="Door3" class="col-md-2">
    <span class="badge">3</span>
</div>
<div id="Door4" class="col-md-2">
    <span class="badge">4</span>
</div>
<div id="Door5" class="col-md-2">
    <span class="badge">5</span>
</div>

<div id="Row2" class="row">
    <div id="Door6" class="col-md-2">
        <span class="badge">6</span>
    </div>
    <div id="Door7" class="col-md-2">
        <span class="badge">7</span>
    </div>
    <div id="Door8" class="col-md-2">
        <span class="badge">8</span>
    </div>
    <div id="Door9" class="col-md-2">
        <span class="badge">9</span>
    </div>
    <div id="Door10" class="col-md-2">
        <span class="badge">10</span>
    </div>
</div>

为了更大的图片，我在MVC 5应用程序中使用Bootstrap 3。我将使用EF6从SQL DB中填充模型中的信息。我想我将使用一些@foreach循环来构建每张“卡片”。

Answer 1

正如其他一些评论中所提到的，连续的所有列都需要加起来有12个。有几种方法可以解决这个问题。 Robb提出的答案在行的每一端都放了一个空列，以便做到这一点。您还可以限制每行4个“门”，并将每个列的大小增加到3.最后，您可以提出一个10列系统，但这可能会有点极端，因为其他两个解决方案。

至于标题没有水平对齐。以下代码demos有一种可能的方法。

我的更改

    <div id="Door1Head" class="panel-heading">
      <span class="badge pull-left">1</span>
      <span class="glyphicon glyphicon-arrow-up pull-right" ></span>
      <h3 class="panel-title text-center">RE031159</h3>
      <div class="clearfix text-center">Some text here</div>
    </div>

也许不是在bootstrap中做事的最好方法，但它确实有效。希望有人能够建立起来为你提供所需的东西。

Answer 2

不确定这正是您正在寻找的，但我会努力拥有一行并让我的面板在行内迭代。像这样：

<div class="row">  
  <div class="col-2 col-sm-5 col-md-3 col-lg-2 panel panel-primary">
    <div class="panel-heading">
      <span class="badge">01</span>
      <h3 class="panel-title">Panel Title</h3>
    </div><!-- /.panel-heading -->
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  </div><!--/span-->
</div><!-- /.row -->

Working Bootply example with responsive panels

Answer 3

如果您正在寻找一个完全开箱即用的解决方案，我建议每行使用4个门col-lg-3，以便您可以轻松匹配继承的12列网格布局在Bootstrap中。否则，您将需要添加一些自定义CSS以启用10列布局。

你几乎已经有了如何制作水平行的概念 - 只需要制作div类row后跟更多div元素，其大小测量总结为12。

我已快速更新了您的小提琴here，它基本上只修复了您原来的一些HTML并将其转换为col-lg-3。

如果您想在网格中进行更精确的测量，请务必在website处查找col-xs，col-sm和col-md。

为了更加动态地做到这一点，只需保持一个持续的计数器;每次你点击4，你重置计数器，你生成一个新的行和填充元素。

Answer 4

对于静态解决方案

<!-- ROW 1 -->
    <div id="Row1" class="row">
        <div id="row1SideBarL" class="col-lg-1"></div>
        <div id="Door1" class="col-lg-2 panel panel-primary" >
            <div id="Door1Head" class="panel-heading">
                <span class="badge">1</span>
                <h3 class="panel-title">RE031159</h3>
                <span class="glyphicon glyphicon-arrow-up"></span>
            </div>
            <div class="panel-body">
                <ul class="list-group">
                    <li class="list-group-item">
                        12315 Carregeenan WG-16 4000 lbs
                    </li>
                    <li class="list-group-item">
                        1063545 Carp meal spread 1042 lbs
                    </li>
                </ul>
            </div>
        </div>
        <div id="Door2" class="col-lg-2">
            <span class="badge">2</span>
        </div>
        <div id="Door3" class="col-lg-2">
            <span class="badge">3</span>
        </div>
        <div id="Door4" class="col-lg-2">
            <span class="badge">4</span>
        </div>
        <div id="Door5" class="col-lg-2">
            <span class="badge">5</span>
        </div>
        <div id="row1SideBarR" class="col-lg-1"></div>
    </div>

<!-- ROW 2 -->
    <div id="Row2" class="row">
        <div id="row2SideBarL" class="col-lg-1"></div>
        <div id="Door6" class="col-lg-2 panel panel-primary" >
        </div>    
        <div id="Door7" class="col-lg-2">
            <span class="badge">2</span>
        </div>
        <div id="Door8" class="col-lg-2">
            <span class="badge">3</span>
        </div>
        <div id="Door9" class="col-lg-2">
            <span class="badge">4</span>
        </div>
        <div id="Door10" class="col-lg-2">
            <span class="badge">5</span>
        </div>
        <div id="row2SideBarR" class="col-lg-1"></div>
    </div>

Answer 5

col-lg-每行应该总共12个

你可以在纪录片上找到这个和许多其他信息：http://getbootstrap.com/2.3.2/scaffolding.html

除此之外，您还可以通过少量的css行来实现类似这样的事情：

width:20%
height:250px;
display:block;
float:left;

使用Bootstrap如何水平布局元素？

5 个答案: