Bootstrap響應固定寬度的col始終居中

Question

我正在嘗試製作具有固定寬度的登錄頁面，同時在頁面的中心有一列。喜歡的東西頁：

https://www.amazon.com/sign-in 

我已經試過期運用偏移colms這樣

<div class="col-md-4 col-md-offset-4" style=" float: none; margin: 0 auto;"> 

它不是大小一致這樣。

Answer 1

如果它是一個固定寬度的DIV，則不需要Bootstrap的網格。你只是這樣做：

<div style="width: 300px; margin: 0 auto;"></div> 

Answer 2

你不能用Bootstrap的組件做到這一點，因爲Bootstrap的列設計爲使用百分比來表示寬度。所以他們會根據視口大小更改大小。你必須寫一些自定義的CSS代碼來做到這一點。

你可以使用下面的代碼片段來做你想做的事情。它使用CSS媒體查詢（這是Bootstrap使用的）。我將div設置爲600px的寬度。當您將窗口大小調整爲小於768px時，它將更改爲100%寬度。我選擇了768px，因爲這是Bootstrap中的xs的斷點。

.col-fixed { 
 
    margin: 0 auto; 
 
    background-color: red; 
 
} 
 
@media (min-width: 768px) { 
 
    .col-fixed { 
 
    width: 600px; 
 
    } 
 
}

<div class="col-fixed"> 
 
    This is a fixed width column that becomes 100% when viewport is less than 768px 
 
</div>