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>