Question

我正在尝试使用Bootstrap 3构建一个接口，如下所示：

--------Fieldset--------        -----Fieldset-----
Col 1        Col 2              Some data
Some data    Some data          Some data
Some data    Some data          Some data
Some data    Some data          Some data

------------------------Fieldset------------------------
Some large <textarea>

但是，我不知道如何实现这一目标。我关心的是一个字段集中的多个列，以及跨越其上方两个字段集长度的底部字段集。我知道要制作堆叠的场集，我需要做的就是嵌套它们，但这会限制子场集的长度。

我甚至可以做什么？会不会像我想的那样变得难看？

提前感谢您的任何帮助！

Answer 1

无论如何我应该提供这个 - 抱歉。这里有一些标记（应该）让你滚动。

<强> HTML

<div class="row">
<div class="col-md-6">
  <div class="mycol-1">
    <p>Fieldset</p>
    <div class="row">
        <div class="col-md-6">
            <p>Col 1</p>
            <p>Some data</p>
            <p>Some data</p>
            <p>Some data</p>
        </div>
        <div class="col-md-6">
            <p>Col 2</p>
            <p>Some data</p>
            <p>Some data</p>
            <p>Some data</p>
        </div>
    </div>
  </div>
</div>
<div class="col-md-6">
  <div class="mycol-2">
    <p>Fieldset</p>
    <p>Some data</p>
    <p>Some data</p>
    <p>Some data</p>
  </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
  <div class="mycol-3">
    <p>Fieldset</p>
    <p>Some large textarea</p>
  </div>
</div>
</div>

<强> CSS：

.mycol-1 { background-color: red; }
.mycol-2 { background-color: pink; }
.mycol-3 { background-color: orange; }

我只使用css作为显示边界的方式。您可能希望至少重命名这些类（或者一起删除它们）。希望这有帮助！

Bootstrap - 使用<fieldset> s </fieldset>获得乐趣

1 个答案: