1.在學切版container也學過margin上下0左右auto,再設容器的寬度。
2.在bootstrap.css的container與container-fluid的CSS部分都為:
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
3.兩個差異在於container-fluid寬度怎麼縮小就是padding左右都為15、margin左右為0
但是container就不一樣了,加了響應式斷點(如下)會依據寬度如大於768px(也就是最小768px)則設定寬度最大為720px但是720px是包括padding左右15px寬度為690px,另外margin設為auto,由於響應式斷點外面會額外出現左右margin隨著寬度而變化。
4.小弟是看官網後去看bootstrap.css,來做這個判斷,如有錯誤前輩可留言糾正,甘恩。
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
印象中!important好像是為具有優先權的意思
.container {
min-width: 992px !important;
}
container
<div class="container">
<h1>container</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, rem eaque. Cum quibusdam sit ut saepe autem sunt cupiditate, doloremque tempore nostrum at aperiam corporis dolores mollitia quidem corrupti nihil!
</div>
<br>
container-fluid
<div class="container-fluid">
<h1>container-fluid</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, rem eaque. Cum quibusdam sit ut saepe autem sunt cupiditate, doloremque tempore nostrum at aperiam corporis dolores mollitia quidem corrupti nihil!
</div>
<br>