为什么在我的主标头之后，Bootstrap Grid无法正常工作？

Question

Everything works fine in the main header section. 在主标题部分中，一切正常。 What im trying to do is create a simple row with 3 columns after it but they are displaying as 3 different rows and not 1 row with 3 columns? 我想做的是创建一个简单的行，其后有3列，但它们显示为3个不同的行，而不是显示为3列的1行？ Below is the code. 下面是代码。 It strange because the header section is working perfect! 奇怪的是，标题部分工作完美！ Thank you for any help and advice! 感谢您的帮助和建议！

<!DOCTYPE html>
<html>

<head>
    <title>The Beckwood - Scunthorpe</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=satisfy" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">


</head>

<body>

    <div class="header-main">

        <nav class="navbar navbar-default">
            <div class="container">
                <a class="navbar-brand" href="#" >
                     <img src="assets/img/logo.png">

                </a>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">HOME</a></li>
                         <li><a href="#">MENU</a></li>
                          <li><a href="#">GALLERY</a></li>
                           <li><a href="#">ABOUT</a></li>
                            <li><a href="#">BOOK A TABLE</a></li>
                            <li><a href="#">CONTACT</a></li>
                        </ul>
                    </div>
            </div>
        </nav>
        <div class="hero">
            <h1 id="welcome">Welcome to The Beckwood.</h1>
            <p>The Beckwood is a family run pub located in scunthorpe offering quality homemade food, carverys, events and live sports.</p>
            <div class="btn btn-primary">View Menu</div>
            <div class="btn btn-primary">Book a table</div>
        </div>
    </div>

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

</body>

</html>

CSS CODE, MAYBE SOMETHING IN HERE IS EFFECTING IT? CSS代码，也许在这里起作用？

body {
    font-family: 'Montserrat', sans-serif;

}

.navbar-brand {
  padding: 0px;
}

.navbar-brand>img {
  height: 90px;
  width: auto;
}

.logo {
    height:200px;
    width:400px;
}
.header-main {
    color: white;
    background: url("../../assets/img/banner.png") no-repeat ;
    background-size: cover;
    background-position: bottom;
    padding-bottom: 20px;

}

.header-main .navbar-nav>li>a {
    color: white;
    font-size: 13px;
    border-radius: 10px;

}

.header-main .navbar {
    margin-bottom: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    border-bottom:none;
    background-color: transparent;
    min-width: 300px;
    border: none;
}

.header-main .navbar-default .navbar-nav>.open>a,
.header-main .navbar-default .navbar-nav>.open>a:focus,
.header-main .navbar-default .navbar-nav>.open>a:hover {
    color: #ccc;
    background-color: transparent;
}

.header-main .nav>li>a:focus,
.header-main .nav>li>a:hover {
    color: #ccc;
    background-color: transparent;
}

.header-main .navbar-nav>li {
    margin-right: 10px;
}

.header-main .navbar-nav {
   margin-top: 12px;
}

.header-main .navbar-toggle {
    background-color: transparent !important;
    margin-top: 20px;
    border: 1px solid #fff;
}

.header-main .navbar-toggle .icon-bar {
    background-color: white;
}


.header-main .hero {
    text-align: center;
    margin-top: 80px;
    margin-bottom: 100px;
}

.header-main .hero h1 {
    color: #FFB03B;;
    font-family: 'Satisfy', cursive;
    font-size: 70px;
    margin-bottom: 36px;

}


.header-main .hero p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    max-width: 660px;
    margin: 0 auto 20px;
    font-weight: normal;
    line-height: 1.5;
}

.header-main .btn-primary {
    color: #fff;
    background-color: transparent;
    border-color: #fffbfb !important;
    outline:none;
    margin-right: 20px;
    margin-top: 20px;
    font-size: 19px;
    padding: 18px 24px;
    transition:0.2s background-color;
}

.header-main .btn-primary:hover {
    background-color:rgba(255,255,255,0.1);
}

.header-main .btn-primary:active {
    transform:translateY(1px);
}

@media screen and (max-width: 767px) {

    .header-main .navbar-default .navbar-nav .open .dropdown-menu>li>a{
        color: #fff;
        font-size: 16px;
    }

    .header-main .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{
        color: #ccc;
    }

    .header-main .navbar-collapse {
        margin-left: 20px;
        border-top: none;
        box-shadow: none;
    }

    .header-main .hero{
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .header-main .hero h1{
        font-size: 42px;
    }
}

Answer 1

Aside from the errors I posted in my latest comment, the real problem is that you're not specifying the size of each column. 除了我在最新评论中发布的错误之外，真正的问题是您没有指定每列的大小。 With bootstrap you have to specify how many grid columns each col will take up. 使用引导程序，您必须指定每个列将占用多少个网格列。 Totalling 12 across. 总共12个。 So for your code, you simply need to add a -4 to the class: 因此，对于您的代码，您只需要在类中添加-4即可：

<div class="container">
  <div class="row">
    <div class="col-sm-4">
        One of three columns
    </div>
    <div class="col-sm-4">
        One of three columns
    </div>
    <div class="col-sm-4">
        One of three columns
    </div>
</div>

Here's a simple example that explains it more on W3: 这是一个简单的示例，在W3上有更多说明：

https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

Answer 2

You are using Bootstrap 3 so you need to specify column width like col-sm-4 not col-sm . 您正在使用Bootstrap 3，因此需要指定列宽度，例如col-sm-4而不是col-sm 。 if you used Bootstrap 4 col-sm should be fine. 如果您使用了Bootstrap 4 col-sm应该没问题。

为什么在我的主标头之后，Bootstrap Grid无法正常工作？

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-03-12 19:40:42

解决方案2
0 2018-03-12 19:48:16

为什么在我的主标头之后，Bootstrap Grid无法正常工作？

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-03-12 19:40:42

解决方案2 0 2018-03-12 19:48:16

解决方案1
2 已采纳 2018-03-12 19:40:42

解决方案2
0 2018-03-12 19:48:16