【发布时间】：2017-01-30 02:58:04
【问题描述】：
我创建了自己的 12 列响应式网页设计网格（如引导程序），该网格中的每一行都占用了 100% 的网格。在我的 html 文件中，我有三个部分，其中每个部分占页面的 33.33%，总共 100%。当我尝试在这些部分之间添加边距时，行中的最后一个部分会跳转到新行。我知道引导程序使用偏移类来解决这个问题，但我正在尝试用我自己的响应式网页设计网格来实现一个解决方案。
您可以在jsfiddle 上查看 HTML 和 CSS 代码的预览，如果您只想查看代码，请点击此处。
/********** Base Style **********/
* {
box-sizing: border-box;
font-family: "Raleway", sans-serif;
font-size: 16px;
}
h1 {
margin-bottom: 50px;
text-align: center;
font-size: 1.75em;
}
h2 {
text-align: center;
font-size: 1.25em;
margin: 0px;
width: 120px;
border: 1px solid black;
}
section {
background-color: #999999;
height: auto;
position: relative;
text-align: justify;
color: black;
padding: 30px 15px 15px 15px;
margin: 10px;
}
#title1 {
position: absolute;
top: -1px;
right: -1px;
background-color: #D99A95;
}
#title2 {
position: absolute;
top: -1px;
right: -1px;
background-color: #C44346;
}
#title3 {
position: absolute;
top: -1px;
right: -1px;
background-color: #E2D496;
}
/* Simple Responsive Framework. */
.row {
width: 100%;
}
/************** Large Devices Only **************/
@media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
border: 1px solid black;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
/************** Medium Devices Only **************/
@media (min-width: 768px) and (max-width: 991px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
border: 1px solid black;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
/************** Mobile Devices Only **************/
@media (max-width: 767px) {
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
border: 1px solid black;
}
.col-xs-1 {
width: 8.33%;
}
.col-xs-2 {
width: 16.66%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-4 {
width: 33.33%;
}
.col-xs-5 {
width: 41.66%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-7 {
width: 58.33%;
}
.col-xs-8 {
width: 66.66%;
}
.col-xs-9 {
width: 74.99%;
}
.col-xs-10 {
width: 83.33%;
}
.col-xs-11 {
width: 91.66%;
}
.col-xs-12 {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module 2 Solution</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway|Roboto" rel="stylesheet">
</head>
<body>
<h1>Module 2 Solution</h1>
<div class="row">
<section class="col-lg-4 col-md-6 col-xs-12">
<h2 id="title1">Chicken</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="col-lg-4 col-md-6 col-xs-12">
<h2 id="title2">Beef</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="col-lg-4 col-md-12 col-xs-12">
<h2 id="title3">Sushi</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</div>
</body>
</html>【问题讨论】：
标签： html css responsive-design margin