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

Question

我正在尝试复制此模型的以下内容 -->

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

这是我目前所拥有的 -->

<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

每行的 col-lg- 总共应为 12 个

您可以在文档中找到此信息和许多其他信息：http://getbootstrap.com/2.3.2/scaffolding.html

除此之外，您还可以通过几行 css 行在不引导的情况下实现类似的功能：

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

Answer 2

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

您几乎已经有了如何制作水平行的概念 - 只需制作一个 div 和一个 row 类，然后是更多 div 元素，它们的大小总计为 12。

我已经快速更新了你的小提琴 here，它基本上只是修复了你最初拥有的一些 HTML，并将它们转换为 col-lg-3。

如果您想在网格内进行更精确的测量，请确保在 website 上查找 col-xs、col-sm 和 col-md。

为了更动态地执行此操作，只需保持一个持续的计数器；每次点击 4 时，都会重置计数器并生成新行并填充元素。

Answer 3

对于静态解决方案

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

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

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

正如在一堆其他 cmets 中所提到的，一行中的所有列需要加起来为 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>

也许不是在引导程序中做事的最佳方式，但它确实有效。希望有人可以以此为基础，为您提供所需的东西。