如何使用Bootstrap在英雄單位顯示兩列？

我想讓bootstrap的行在英雄單位裏面工作。我厭倦了這個例子How to display a thumbnail in the hero unit with Bootstrap?，但它似乎不起作用。我只在英雄中獲得1列。我的猜測是填充導致列進行換行，因爲它在將填充設置爲0時似乎正確對齊，但我不確定如何正確解決該問題。如何使用Bootstrap在英雄單位顯示兩列？

<div class="hero-unit" style="padding: 15px;"> 
    <div class="page-header"> 
     <h2> 
      Example Page Header 
      <small>Example Sub Header</small> 
     </h2> 
    </div> 

    <div class="row"> 
     <div class="span4"> 
      <img src="http://placehold.it/360x268" alt=""> 
     </div> 

     <div class="span8"> 
      test 
     </div> 
    </div> 
</div>

來源

2012-08-08 Alex Barker

你可以添加一個示例圖像，即使與油漆，你喜歡你的網頁應該是什麼？ – osyan 2012-08-08 06:37:04

亞歷克斯，

如果您使用的自舉responsive.css，或流體模板，然後應用以下的標記。

<div class="hero-unit"> 
    <div class="row-fluid"> 
     <div class="columnA pull-left"> 
      <h2>Column A</h2> 
      <img src="http://placehold.it/500x300.png"/> 
     </div> 

     <div class="columnB pull-right"> 
      <h2>Column B</h2> 
      <img src="http://placehold.it/500x300.png"/> 
     </div> 

    </div> 
    </div>

然後在頭部插入以下樣式。

.columnA, 
    .columnB{ 
    width: 500px; 

    }

的以上驗證碼應輸出類似下面的圖像的原稿：

enter image description here

來源

2012-08-08 08:02:03

太棒了！謝謝。 – 2012-08-08 18:41:02

跨度沒有被使用的原因是什麼？我認爲跨度通常是將信息分解成列的方式。 – 2013-02-01 23:23:33

不確定。我只是通過使用'row-fluid'來獲得類似的工作情況，僅此而已。 – mgold 2013-03-28 00:17:07

可以使用加起來11（而不是12）的跨度。沒有額外的CSS是必要的：

<div class="hero-unit"> 
    <div class="row"> 
     <div class="span8"> column A </div> 
     <div class="span3"> column B </div> 
    </div> 
</div>

來源

2012-10-07 15:23:42 amirnissim

當我使用row-fluid時，我不得不使用''row-fluid''來工作 – 2012-12-20 12:27:59

，這比Gary接受的答案更有效。在接受的答案中，Gary定義了CSS中的寬度 - 這些都沒有效果。左拉和右拉有效地將英雄分成兩部分。如果你需要列是不同的寬度，使用amirnissim的答案。 – 2013-05-25 08:22:17

如何使用Bootstrap在英雄單位顯示兩列？

回答

相關問題