-2
我创建了自己的响应式网页设计网格，其中包含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>