1. 首頁
  2. 問答
  3. Bootstrap行容器的中心內容

Bootstrap行容器的中心內容

2012-11-19 52 views
21

我有下面的代碼，我想中心外「行」div的「好」的元素。我已經嘗試了各種方法，比如text-align：center（它只是居中文本而不是內部DIV元素）。Bootstrap行容器的中心內容

這是一個jsfiddle。想法是，我得到一個「好」 。它包裝後4左右，但如果是小於4時，他們應該出現在頁面上居中

<body class="container-fluid"> 
    <div class="row"> 
     <div class="well span2"> 
      <div class="row"> 
       <div class="span2"> 
        Header 
       </div> 
      </div> 
      <div class="row"> 
       <div class="span2"> 
        Sub Header 
       </div> 
      </div> 

     </div> 

     <div class="well span2"> 
      <div class="row"> 
       <div class="span2"> 
        Header 
       </div> 
      </div> 
      <div class="row"> 
       <div class="span2"> 
        Sub Header 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

來源

2012-11-19 Gregg

回答

44

我解決了這個通過執行以下操作：

<body class="container-fluid"> 
    <div class="row"> 
     <div class="span6" style="float: none; margin: 0 auto;"> 
      .... 
     </div> 
    </div> 
</body>

來源

2012-11-19 22:35:02 Gregg

+1

剛跑的測試，應該指出的是，只是伴奏需要添加。 –

9

試試這個，它的工作原理！

<div class="row"> 
    <div class="center"> 
     <div class="col-xs-12 col-sm-4"> 
      <p>hi 1!</p> 
     </div> 
     <div class="col-xs-12 col-sm-4"> 
      <p>hi 2!</p> 
     </div> 
     <div class="col-xs-12 col-sm-4"> 
      <p>hi 3!</p> 
     </div> 
    </div> 
</div>

然後，在CSS定義中心的div和中心的寬度在文檔中：

.center { 
    margin: 0 auto; 
    width: 80%; 
}

來源

2015-04-04 13:21:22 Ezequiel

-1

放置一個容器你行的內部，並且將中心的內容，爲您服務。

<body class="container-fluid"> 
    <div class="row"> 
     <div class="container"> 
      content goes here... 
     </div> 
    </div> 
</body>

來源

2017-06-05 21:43:26

相關問題

 相關問題