主标题部分的一切正常。我想要做的是创建一个简单的行，后面有3列，但它们显示为3个不同的行而不是1行3列？下面是代码。这很奇怪，因为标题部分工作正常！感谢您的帮助和建议！
<!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代码，可能会在这里影响它？
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;
}
}
答案 0 :(得分：2)
除了我在最新评论中发布的错误之外，真正的问题是您没有指定每列的大小。使用bootstrap，您必须指定每个col将占用多少个网格列。总共12个。因此，对于您的代码，您只需要在类中添加-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>
这是一个简单的例子，它在W3上解释得更多：
https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
答案 1 :(得分：0)
您正在使用Bootstrap 3，因此您需要指定列宽，例如col-sm-4而不是col-sm。如果您使用Bootstrap 4 col-sm应该没问题。