iT邦幫忙

0

Bootstrap-容器置中

  • 分享至 

  • xImage
  •  

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>

codepen
參考:六角學院bootstrap官網


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言