ブートストラップcolクラスが動作しません

-3

私は、Web開発を学んでいます。私はbootstrap colクラスで1行に3つのdivを作成しようとしていますが、2つのdivが空白になり、私はレイアウトを達成するために3つのdivで固定幅を作ったが、それは普通の方法だとは思わない。多分、CSSプロパティ 'box-sizing'、私は 'border-box'を設定しましたが、動作しません。ブートストラップcolクラスが動作しません

マイページ https://aura-zx.github.io/coursera-front-end-basic/module3-solution/index.html

出典

2017-06-13 Aura

問題はカスタムマージンを追加し、列に境界線を追加したことを示します。これらの両方は、BootStrap列と競合する幅を追加します。 3番目のポイントとして、BootStrapのすべてのカラムはさらに、 '.row'のクラスの中にある必要があります。これは、カラムによって作成されたマージンに対応するために負のマージンを与えます:) –

また、あなたのページは** Assignment Solution **というタイトルになっていますあなたは[**自分で多くの研究をする**]（http://meta.stackoverflow.com/questions/261592）が期待されます。私は戻って[** Bootstrap examples **]（http://getbootstrap.com/getting-started/）を読むことをお勧めします。詳細については、[**よくある質問をする方法**]（http://stackoverflow.com/help/how-to-ask）を参照し、[**ツアー**]（http：//サイトの:) stackoverflow.com/tour –

@ObsidianAgeご意見ありがとうございます、それは非常に有用で詳細がいっぱいです。またアドバイスありがとう、私はそれを行います:) – Aura

問題は、あなたがそれを使用しないでください

~58

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

、あなたも 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>

内 colを使用する必要がある行にカスタムスタイルファイル style.cssであります

出典

2017-06-13 00:45:40 Blaztix

あなたのコードをありがとう。 – Aura

ブートストラップcolクラスが動作しません

答えて

関連する問題