1. 首頁
  2. 問答
  3. Bootstrap col類不起作用

Bootstrap col類不起作用

2017-06-13 109 views
-3

我正在學習web開發。我嘗試使用bootstrap col類在一行中創建三個div，但它不起作用，兩行中的一行留下一些空白，另一個div在一個新的line.I做了三個div的固定寬度來實現佈局，但我不認爲這是一個常規的方法。 它可能是CSS屬性'box-sizing'，我把它設置爲'border-box'，它不起作用。Bootstrap col類不起作用

我的頁面。 https://aura-zx.github.io/coursera-front-end-basic/module3-solution/index.html

來源

2017-06-13 Aura

+0

問題是您已將自定義邊距和邊框添加到您的列中。這兩個都會增加與BootStrap列衝突的寬度。作爲第三點，所有的BootStrap列還需要位於'.row'類中，這會給出負邊界以容納由列創建的邊界:) –

+0

此外，您的頁面標題爲** Assignment Solution **，因此你應該[**自己做很多研究]（http://meta.stackoverflow.com/questions/261592）。我建議回去閱讀[** Bootstrap示例**]（http://getbootstrap.com/getting-started/）。有關詳細信息，請參閱[**如何提出良好問題**]（http://stackoverflow.com/help/how-to-ask），並參加[**遊覽**]（http：//該網站:) –

+0

@ObsidianAge感謝您的評論，這是非常有用和充滿細節。也感謝您的建議，我會這樣做:) – Aura

回答

0

的問題是在您的自定義風格文件style.css符合~58

.item{ 
    margin: 5px 5px 5px 0; 
}

你不應該使用，你也應該使用col內div.row

body { 
 
    font-size: 16px; 
 
    font-family: 'Oxygen', sans-serif; 
 
} 
 

 

 
/** HEADER **/ 
 

 
#header-nav { 
 
    background-color: #f6b319; 
 
    border-radius: 0; 
 
    border: 0; 
 
} 
 

 
.navbar-brand h1 { 
 
    font-family: 'Lore', serif; 
 
    color: purple; 
 
    font-size: 1.5em; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    text-shadow: 1px 1px 1px #222; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    line-height: .75; 
 
} 
 

 
.navbar-brand a:hover, 
 
.navbar-brand a:focus { 
 
    text-decoration: none; 
 
} 
 

 
#nav-list a { 
 
    color: #951c49; 
 
    text-align: center; 
 
} 
 

 
#nav-list a:hover { 
 
    background: #e7e7e7; 
 
} 
 

 
#nav-list a span { 
 
    font-size: 1.8em; 
 
} 
 

 
#nav-list li { 
 
    padding: 0; 
 
} 
 

 
.navbar-header button.navbar-toggle, 
 
.navbar-header .iconbar { 
 
    border: 1px solid #61122f; 
 
} 
 

 
.navbar-header button.navbar-toggle { 
 
    /* after clear, button own a new line*/ 
 
    clear: both; 
 
    /* reduce margin-top can make them in one line.*/ 
 
    margin-top: -40px; 
 
} 
 

 
body h1 { 
 
    color: black; 
 
} 
 

 
.item { 
 
    background-color: grey; 
 
    box-sizing: border-box; 
 
} 
 

 
@media (min-width: 1200px) { 
 
    .item { 
 
    border: 1px solid black; 
 
    margin: 5px 5px 5px 0; 
 
    padding: 5px; 
 
    } 
 
} 
 

 
@media (min-width: 992px) and (max-width: 1199px) { 
 
    .item { 
 
    border: 1px solid black; 
 
    margin: 5px 5px 5px 0; 
 
    padding: 5px; 
 
    } 
 
} 
 

 
@media (min-width: 768px) and (max-width: 991px) { 
 
    .item { 
 
    border: 1px solid black; 
 
    margin: 5px 5px 5px 0; 
 
    padding: 5px; 
 
    } 
 
    #chicken { 
 
    width: 355px; 
 
    } 
 
    #beaf { 
 
    width: 355px; 
 
    } 
 
    #sushi { 
 
    clear: both; 
 
    } 
 
} 
 

 
@media (max-width: 767px) { 
 
    #main-content { 
 
    margin: 30px; 
 
    } 
 
}
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Assignment Solution for Module 3</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <nav id="header-nav" class="navbar navbar-default"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <div class="navbar-brand"> 
 
      <a href="#"> 
 
       <h1>Food,LLC</h1> 
 
      </a> 
 
      </div> 
 

 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button></div> 
 

 
     <div id="collapsable-nav" class="collapse navbar-collapse"> 
 
      <ul id="nav-list" class="nav navbar-nav navbar-right"> 
 
      <li class="active"> 
 
       <a href="#" class="visible-xs"><br>Chicken</a> 
 
      </li> 
 
      <li> 
 
       <a href="#" class="visible-xs"><br>Beaf</a> 
 
      </li> 
 
      <li> 
 
       <a href="#" class="visible-xs"><br>Sushi</a> 
 
      </li> 
 
      </ul> 
 

 
     </div> 
 
     </div> 
 
     <!-- .container --> 
 
    </nav> 
 
    <!-- #header-nav --> 
 
    </header> 
 
    <h1 class="text-center">Our Menu</h1> 
 
    <div id="main-content" class="container"> 
 
    <div class="row"> 
 
     <div id="chicken" class="col-md-4 col-sm-6"> 
 
     <div class="item"> 
 
      <h3 class="text-center">Chicken</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, 
 
      voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, 
 
      itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, 
 
      itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus 
 
      modi reprehenderit minima, itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus 
 
      modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, 
 
      rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, 
 
      rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. 
 
      Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div id="beaf" class="col-md-4 col-sm-6"> 
 
     <div class="item"> 
 
      <h3 class="text-center">Beaf</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, 
 
      voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, 
 
      itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, 
 
      itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus 
 
      modi reprehenderit minima, itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus 
 
      modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, 
 
      rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, 
 
      rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. 
 
      Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div id="sushi" class="col-md-4 col-sm-6"> 
 
     <div class="item"> 
 
      <h3 class="text-center">Sushi</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, 
 
      voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, 
 
      itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, 
 
      itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus 
 
      modi reprehenderit minima, itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus 
 
      modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, 
 
      rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, 
 
      rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. 
 
      Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
</body> 
 

 
</html>

來源

2017-06-13 00:45:40 Blaztix

+0

感謝您的代碼。 – Aura

相關問題

 相關問題