【发布时间】：2020-05-08 13:37:27
【问题描述】：
我刚刚启动引导程序，但遇到了一个无法解决的问题
当我在代码中将margin 给我的section 时，第三部分下来了，尽管我已经将宽度设置为col-md-4 我无法留出余量来分隔这些部分，当browserwidth 小于 768px 部分堆栈（我想要的），但也有一个从左到右查看的滚动条，我不会，请你帮助我，抱歉发布这样的代码我我是 stackoverflow 的新手。
body {
background: #F13421;
font-size: 16px;
margin: 0;
}
#header-nav {
border-radius: 0;
}
.container {
border: none;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0;
padding: 10px 10px 0 10px;
}
.navbar-brand h1 {
font-size: 2em;
margin-top: -5px;
margin-bottom: 40px;
line-height: 0.65;
}
#nav-list {
margin-top: 0;
margin-bottom: 0;
background: #F1F021;
}
#nav-list hr {
width: 90%;
}
.row {
margin: 10px;
}
#tiles section {
background: #D3D3D3 ;
margin: 5px;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Module 3 Solution</title>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand"><h1>Food, LLC</h1>
</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 visible-xs">
<li class="text-center">
<a href="#chicken"><div>Chicken</div></a>
<hr class="visible-xs">
</li>
<li class="text-center">
<a href="#beef">Beef</a>
<hr class="visible-xs">
</li>
<li class="text-center">
<a href="#sushi">Sushi</a>
</li>
</ul>
</div>
</div><!--END OF CONTAINER-->
</nav><!--END OF NAV-->
</header><!--END OF HEADER-->
<div id="main-content" class="container-fluid">
<h2 class="text-center">Our Menu</h2>
<div id="tiles" class="row">
<section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
<h3>Chicken</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis? Commodi ut minima maiores consequuntur voluptates unde deleniti error vero tempora, eligendi blanditiis, deserunt aliquam nobis porro dolores tenetur amet eius! Aspernatur, vitae. Suscipit, dolores quos doloribus. Velit repudiandae provident a, in ad id aspernatur dolor ratione eos placeat, ex temporibus ipsum eligendi sequi reprehenderit cupiditate perferendis eaque, explicabo blanditiis nemo dolorem aperiam minima deleniti. Tempore, rem, quam? Totam non reiciendis amet, at reprehenderit inventore, adipisci nesciunt itaque dolorum asperiores, ducimus corrupti quam impedit quaerat autem quod officia tempora. Itaque dicta deleniti fugit, laudantium rerum sint consectetur asperiores, quia veritatis dignissimos esse in nesciunt distinctio facere iure facilis voluptatibus placeat voluptate voluptatum expedita animi a veniam nulla ea. Enim aliquid, non. Necessitatibus nam fugiat autem quae qui quam consequatur repudiandae quidem ipsam impedit distinctio, sequi doloribus, quaerat quod ab maxime. Harum facilis sed commodi reprehenderit? <div>(End of Chicken Section) <a href="#chicken"><span>Back to Top</span></a></div></p>
</section>
<section id="beef" class="col-md-4 col-sm-6 col-xs-12 ">
<h3>Beef</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis? Commodi ut minima maiores consequuntur voluptates unde deleniti error vero tempora, eligendi blanditiis, deserunt aliquam nobis porro dolores tenetur amet eius! Aspernatur, vitae. Suscipit, dolores quos doloribus. Velit repudiandae provident a, in ad id aspernatur dolor ratione eos placeat, ex temporibus ipsum eligendi sequi reprehenderit cupiditate perferendis eaque, explicabo blanditiis nemo dolorem aperiam minima deleniti. Tempore, rem, quam? Totam non reiciendis amet, at reprehenderit inventore, adipisci nesciunt itaque dolorum asperiores, ducimus corrupti quam impedit quaerat autem quod officia tempora. Itaque dicta deleniti fugit, laudantium rerum sint consectetur asperiores, quia veritatis dignissimos esse in nesciunt distinctio facere iure facilis voluptatibus placeat voluptate voluptatum expedita animi a veniam nulla ea. Enim aliquid, non. Necessitatibus nam fugiat autem quae qui quam consequatur repudiandae quidem ipsam impedit distinctio, sequi doloribus, quaerat quod ab maxime. Harum facilis sed commodi reprehenderit?<div>(End of Beef Section) <a href="#beef"><span>Back to Top</span></a></div></p>
</section>
<section id="sushi" class="col-md-4 col-sm-12 col-xs-12">
<h3>Sushi</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis? Commodi ut minima maiores consequuntur voluptates unde deleniti error vero tempora, eligendi blanditiis, deserunt aliquam nobis porro dolores tenetur amet eius! Aspernatur, vitae. Suscipit, dolores quos doloribus. Velit repudiandae provident a, in ad id aspernatur dolor ratione eos placeat, ex temporibus ipsum eligendi sequi reprehenderit cupiditate perferendis eaque, explicabo blanditiis nemo dolorem aperiam minima deleniti. Tempore, rem, quam? Totam non reiciendis amet, at reprehenderit inventore, adipisci nesciunt itaque dolorum asperiores, ducimus corrupti quam impedit quaerat autem quod officia tempora. Itaque dicta deleniti fugit, laudantium rerum sint consectetur asperiores, quia veritatis dignissimos esse in nesciunt distinctio facere iure facilis voluptatibus placeat voluptate voluptatum expedita animi a veniam nulla ea. Enim aliquid, non. Necessitatibus nam fugiat autem quae qui quam consequatur repudiandae quidem ipsam impedit distinctio, sequi doloribus, quaerat quod ab maxime. Harum facilis sed commodi reprehenderit?<div>(End of Sushi Section) <a href="#sushi"><span>Back to Top</span></a></div></p>
</section>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html> 【问题讨论】：
-
欢迎来到 StackOverflow，Roshan！有点难以理解问题所在。你能简化你的代码，让它只包含引起问题的部分吗？
-
请使用标点符号。您的问题很难阅读。
-
对错误感到抱歉。实际上我找不到麻烦的部分。查看宽度何时为 1200-768px 我希望代码中声明的部分占据屏幕的 3 个部分，但发生了什么它们不是并排放置，而是一个一个堆叠在一起。另外一个滚动条可以在 x 方向滚动，但部分没有发生。
标签： html css twitter-bootstrap-3