Question

我正在学习web开发。我尝试使用bootstrap col类在一行中创建三个div，但它不起作用，连续两个div留下一些空白而另一个div在一个新行中。我制作固定宽度有三个div来实现布局，但我不认为这是一种常规方法。它可能是CSS属性'box-sizing'，我将它设置为'border-box'，它不起作用。

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

Answer 1

问题出在第style.css行

中的自定义样式文件~58中

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

您不应该使用它，您还应该在col

中使用div.row

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

Bootstrap col类不起作用

1 个答案: