所以我在bootstrap 4中的列有这个问题。我编写了这段代码但是在浏览器中,3块之间没有空格。每个块有4列但它们之间没有边距。
我试图更改bootstrap 4行用于填充,但它使事情变得更糟,但是,这里是代码附加的代码。您可以拥有结果的实时视图,如果需要,可以对其进行编辑。
您可以在此链接中看到它:https://codepen.io/PlatoCode/pen/erWaXg
sub MAIN ( *@files ($,*@) ) {
# Rest of the program
}
CSS: -
<section class="jobs">
<div class="container">
<div class="row">
<div class="col-md-4 single_job">
<span style="color: rgb(232, 61, 98);">toronto, canada</span>
<h5>Web Designer</h5>
<p>Development Team</p>
<a href="#" class="btn" style="background-color: rgb(232,61,98);">Apply Now</a>
</div>
<div class="col-md-4 single_job">
<span style="color: rgb(232, 61, 98);">toronto, canada</span>
<h5>Web Designer</h5>
<p>Development Team</p>
<a href="#" class="btn" style="background-color: rgb(232,61,98);">Apply Now</a>
</div>
<div class="col-md-4 single_job">
<span style="color: rgb(232, 61, 98);">toronto, canada</span>
<h5>Web Designer</h5>
<p>Development Team</p>
<a href="#" class="btn" style="background-color: rgb(232,61,98);">Apply Now</a>
</div>
</div>
</div>
答案 0 :(得分:1)
您将在更大的屏幕上看到最佳结果
我添加了div
并使用了bootstrap space
有关引导程序空间的更多详细信息:https://getbootstrap.com/docs/4.0/utilities/spacing/
html { -webkit-font-smoothing: antialiased;
}
body {
font-family: "Open Sans", sans-serif;
font-weight: 400;
color: #1c1c1c;
height: 100%;
min-height: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
line-height: 1;
color: #1c1c1c;
margin-top: 0
}
h1 {
font-size: 2.813em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.438em;
}
h5 {
font-size: 1.25em;
}
h6 {
font-size: 1.125em;
}
ul,
ol {
list-style: none;
line-height: 1.85714286em;
}
p {
font-family: 'Roboto';
font-size: 0.938em;
color: #889094;
}
.btn {
display: inline-block;
background-color: #50b1fc;
text-align: center;
cursor: pointer;
color: #fff;
border-radius: 38px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
overflow: hidden;
position: relative;
z-index: 0;
vertical-align: middle;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
text-decoration: none;
text-shadow: none;
padding: 10px 30px;
}
.btn:hover {
color: white;
}
.btn2 {
display: inline-block;
background-color: #fff;
text-align: center;
cursor: pointer;
color: #010d2f;
border-radius: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
overflow: hidden;
position: relative;
z-index: 0;
vertical-align: middle;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
text-decoration: none;
text-shadow: none;
padding: 10px 30px;
}
.btn2:hover {
color: #010d2f;
}
/* Jobs */
.single_job {
background-color: #fff;
-webkit-box-shadow: 0 0 38px rgba(0,0,0,.08);
-moz-box-shadow: 0 0 38px rgba(0,0,0,.08);
box-shadow: 0 0 38px rgba(0,0,0,.08);
padding: 35px 25px;
}
.single_job p {
margin-bottom: 25px;
}
.single_job h5 {
margin-top: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section class="jobs">
<div class="container">
<div class="row">
<div class="col-md-4 p-3">
<div class="single_job">
<span style="color: rgb(232, 61, 98);">toronto, canada</span>
<h5>Web Designer</h5>
<p>Development Team</p>
<a href="#" class="btn" style="background-color: rgb(232,61,98);">Apply Now</a>
</div>
</div>
<div class="col-md-4 p-3">
<div class="single_job">
<span style="color: rgb(232, 61, 98);">toronto, canada</span>
<h5>Web Designer</h5>
<p>Development Team</p>
<a href="#" class="btn" style="background-color: rgb(232,61,98);">Apply Now</a>
</div>
</div>
<div class="col-md-4 p-3">
<div class="single_job">
<span style="color: rgb(232, 61, 98);">toronto, canada</span>
<h5>Web Designer</h5>
<p>Development Team</p>
<a href="#" class="btn" style="background-color: rgb(232,61,98);">Apply Now</a>
</div>
</div>
</div>
</div>
</section>