推薦的方式水平對齊div中的元素與引導

Question

我想要的元素並排而不是在另一個之上。

當我說最好的方法時，我希望元素在您更改屏幕大小時不重疊。

這裏是我的HTML：

<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;"> 
    <div class="col-md-offset-1 col-sm-12 col-md-10" style="background-color: #f6f6ff;"> 
     <img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150"> 
     <h1>2</h1> 
     <img src="media/github.png" alt="GitHub" height="150" width="150"> 
    </div> 
</div> 

這裏是什麼樣子的圖片：

Answer 1

現在你有一個H1分開兩個圖像更改列的尺寸。由於標題標籤默認爲塊級元素，因此不可能將圖像與h1分開排列。但是，如果你把每個圖像/在自己的列標題，他們會排隊：

<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;"> 
    <div class="row"> 

     <div class="col-xs-6"> 
      <h1>1</h1> 
      <img src="http://placehold.it/150x150" alt="Subversion" height="150" width="150"> 
     </div> 

     <div class="col-xs-6"> 
      <h1>2</h1> 
      <img src="http://placehold.it/150x150" alt="GitHub" height="150" width="150"> 
     </div> 

     <div class="clearfix"></div> 

    </div> 
</div> 

Bootply

Answer 2

使用網格系統規模達12列，如描述here

<div class="row"> 
    <div class="col-md-4"> 
    <img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150"> 
    </div> 
    <div class="col-md-4"> 
    <h1>2</h1</div> 
    <div class="col-md-4"> 
    <img src="media/github.png" alt="GitHub" height="150" width="150 
</div> 

您可以通過增大/減小col-md-4

Answer 3

如果你想兩個元素是並排的，你可以用「行」和「 col「來自bootstrap grid。

例如，這是如何編寫2個圖像：

<div class="row"> 
    <div class="col-lg-6"> 
    <img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150"> 
    </div> 
    <div class="col-lg-6"> 
    <img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150"> 
    </div> 
</div 

Answer 4

自舉答案是最好的。之前我有同樣的要求，唯一不同的是，不同列中的內容在大屏幕上視覺上分散太多是不可接受的。在這種情況下，你會使用原始的HTML和使用css

.container-fluid div > * { 
    margin: 0 auto; 
    display: inline; 
}