4

我有以下我正在尝试复制这个模型的内容-->门板图像

我被困在如何让我的元素水平显示？我需要制作一个列表或另一个“表格”吗？能够使用它来完成它，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循环来构建每个“卡片”。

4

5 回答 5

4

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

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

我的改变是

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

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

于 2013-11-13T17:50:10.763 回答
2

Not sure this is exactly what you are looking for, but I'd work at having a single row and getting my panels to just iterate inside the row. Something like this:

<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

于 2013-11-13T16:44:14.023 回答
1

对于静态解决方案

<!-- 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>
于 2013-11-13T16:18:23.483 回答
1

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

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

我在这里对您的小提琴进行了快速更新，它基本上只是修复了您最初拥有的一些 HTML 并将它们转换为col-lg-3.

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

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

于 2013-11-13T16:13:42.393 回答
0

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

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

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

width:20%
height:250px;
display:block;
float:left;
于 2013-11-13T16:13:07.993 回答