如何水平對齊twitter引導中的3個框？

我需要在wordpress主題中彼此相鄰插入3個框。我正在使用wp-bootstrap主題。如何水平對齊twitter引導中的3個框？

我做了我創建了一個網頁，我把它命名爲「報價」，我在CSS文件中寫了下面的代碼

<div class="col-xs-4 text-center offer-box"> 
    <h1>Offer 1</h1> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p> 
    </div> 

    <div class="col-xs-4 text-center offer-box"> 
    <h1>Offer 2</h1> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p> 
    </div> 

    <div class="col-xs-4 text-center offer-box"> 
    <h1>Offer 3</h1> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p> 
    </div>

，我寫

.offer-box { 
    background: #f4e759; 
    height: 300px; 
    border-radius: 10px; 
} 

.offer-box h1 { 
    color: #080808; 
} 

.offer-box p { 
    color: #080808; 
    font-size: 1.2em; 
}

它的工作原理，但盒子無邊距出現。我需要爲每個盒子左右保留邊距。

應該出現這樣的形象正是
enter image description here

來源

2014-04-11 HTML Man

首先，你應該換你列到行。 <div class="row"></div>你應該插入另一<div>在侑列造型的目的，因爲

列通過填充創建排水溝（列內容之間的差距）。該填充通過.rows上的負邊距在第一行和最後一列的行中偏移。

試試這個

<div class="row"> 
<div class="col-xs-4"> 
    <div class="text-center offer-box"> 
    <h1>Offer 1</h1> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum 
       tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas 
       semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien 
       ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. 
       Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac 
       dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, 
       tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, 
       tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
</div> 
</div> 
<div class="col-xs-4"> 
<div class="text-center offer-box"> 
    <h1>Offer 2</h1> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum 
       tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas 
       semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien 
       ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. 
       Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac 
       dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, 
       tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, 
       tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
    </div> 
    </div> 
    <div class="col-xs-4"> 
    <div class="text-center offer-box"> 
    <h1>Offer 3</h1> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum 
       tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas 
       semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien 
       ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. 
       Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac 
       dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, 
       tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, 
       tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
    </div> 
</div> 
</div>

檢查這個環節也有更多的例子Bootstrap grid system

來源

2014-04-11 09:22:38 jeugen

感謝這一點，但它作爲wordpress主題。所以沒有class =「row」的解決方案就可以了，因爲它已經在header.php文件中了，但問題在於類的安排，這對我有所幫助。 –

另外我使用class =「col-md-4」來適應真實文本。謝謝您的幫助。 –

@HTMLMan class =「col-xs-4」最小的設備也有3列。但這是你的決定:) – jeugen

您需要設置相應的變量在style.less文件。我相信你需要看的有

@fluidGridColumnWidth

和

@fluidGridGutterWidth

來源

2014-04-11 09:05:59 Glitcher

你沒有按照引導電網語法。您的.col- *元素應位於.row內，而該位置又應位於.container中。應用正確的嵌套，你會沒事的。

來源

2014-04-11 09:06:53

請檢查下面的：

行必須被放置爲適當對準和填充一個.container（固定寬度）或.container流體（全寬度）之內。

使用行來創建水平的列組。

內容應該放在列中，並且只有列可以是行的直接子節點。

列通過填充創建裝訂線（列內容之間的間隙）。該填充通過.rows上的負邊距在第一行和最後一列的行中偏移。

read

來源

2014-04-11 09:10:36 4dgaurav

如何水平對齊twitter引導中的3個框？

回答

相關問題