引導 - 獲取花哨<fieldset>小號

我試圖建立與引導3，看起來像這樣的接口：引導 - 獲取花哨<fieldset>小號

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

我不知道如何去實現這一點，雖然。我的關注點是一個字段集中的多個列，底部字段集跨越其上方兩個字段集的長度。我知道要製作堆疊字段集，我只需要將它們嵌套在一起，但這會限制子字段集的長度。

我甚至有可能做什麼？它會變得醜陋像我想那樣？

在此先感謝您的幫助！

來源

2014-06-13 jready

繼續分解。在最外層有兩個相鄰的場集。所以就在那裏，你知道你需要2列。然後，在第一個（左）列中，您需要2個更多的嵌套列。在右列中，您不需要嵌套任何東西。然後是下一個'行'，它將跨越你的兩列的寬度。這完全有可能。雖然可能有很多標記。 – Damon

[這裏是一個例子]（http://www.bootply.com/rLkFaCBtpK） – Damon

Bootply無法訪問：/ – jready

我應該提供這個 - 無論如何。這裏有一些標記（應該）讓你滾動。

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的方式來展現boundires。您可能會希望至少重命名這些類（或將它們全部刪除）。希望這可以幫助！

來源

2014-06-13 19:43:44 Damon

真棒，這讓我走了！ – jready

引導 - 獲取花哨<fieldset>小號

回答

相關問題