Wordpress - Bootstrap 对齐
Wordpress - Bootstrap Alignment
我目前正在为一个自由客户开发一个被黑的 wordpress 网站,他们的博客部分存在重大问题。博客部分的第 3 行下降到 2 行。非常感谢任何建议或帮助。
这是 link:http://brucemcarthurdentistrylakewood.com/ 如果您单击顶部的博客,它会向下滚动到我所指的部分。
这是 bootstrap 的一个常见问题,当您将多列换行在一行中时。在您的情况下,这是因为并非所有博客栏的高度都相同。在这种情况下,"How Porcelain Veneers Can Improve Your Smile" 是 542px 高,而几乎所有其他东西都是 521px 高。
如果您将博客部分的最大高度设置为 521 像素,问题就会解决。请参阅下面的屏幕截图:
解决不可见布局问题的一个有用工具是 firefox 的 3D 视图工具。您可以在此处了解更多相关信息:https://developer.mozilla.org/en-US/docs/Tools/3D_View
您只需清除在正确断点处浮动的列,因为您有不同高度的列。参见 MDN Clear you can also read about Bootstraps built-in clearing utilities here: Resets。
注意:您需要确保仅将此应用到要清除的网格区域,因此请使用规范来声明此内容或添加额外的 class 如果你需要的话。
col-md-4
意味着 nth-child(3n+1) @ 991px 以上所以:
@media (min-width: 991px) {
#blog .col-md-4:nth-child(3n+1) {
clear: left;
}
}
工作示例:
@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800";
@import "http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300";
html {
-webkit-font-smoothing: antialiased!important;
font-smoothing: antialiased!important;
text-rendering: optimizeLegibility!important;
overflow-x: hidden;
width: 100%;
height: 100%;
position: relative
}
body {
font-family: 'Open Sans', sans-serif;
background-color: #FFF;
color: #777;
font-size: 13px;
font-weight: 400;
line-height: 1.64285;
overflow-x: hidden;
height: auto;
position: relative
}
a,
a:link,
a:visited {
text-decoration: none;
color: #555;
outline: 0;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-o-transition: all .25s;
transition: all .25s
}
a:active,
a:hover {
color: #39adff;
outline: 0
}
section {
position: relative
}
.bg-img {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: repeat;
background-position: center center
}
.fullwidth-section {
position: relative;
padding-top: 100px;
padding-bottom: 100px
}
.kill-top-margin {
margin-top: 0!important
}
.kill-bottom-margin {
margin-bottom: 0!important
}
.kill-top-padding {
padding-top: 0!important
}
.kill-bottom-padding {
padding-bottom: 0!important
}
.img-center {
margin: 0 auto
}
.rounded {
border-radius: 1000px!important
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: 'Roboto Slab', sans-serif;
font-weight: 700;
color: #555;
line-height: 1.4;
position: relative;
z-index: 1
}
h1,
h2,
h3 {
margin-top: 30px;
margin-bottom: 30px
}
h4,
h5,
h6 {
margin-top: 15px;
margin-bottom: 10px
}
h1,
.h1 {
font-size: 36px;
margin-top: 40px;
margin-bottom: 20px;
line-height: 1.2;
color: #39adff
}
h2,
.h2 {
font-size: 30px
}
h3,
.h3 {
font-size: 24px
}
h4,
.h4 {
font-size: 18px
}
h5,
.h5 {
font-size: 14px
}
h6,
.h6 {
font-size: 12px
}
img,
.wp-post-image {
max-width: 100% !important;
height: auto !important;
border-radius: 4px
}
.img-thumb {
position: relative;
width: 100%;
overflow: hidden;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
border-radius: 4px
}
.img-float-left {
position: relative;
float: left;
border-radius: 1px;
margin: 20px 20px 20px 0;
padding: 0;
max-width: 100%
}
.img-float-right {
position: relative;
float: right;
border-radius: 1px;
margin: 20px 0 20px 20px;
padding: 0;
max-width: 100%
}
.img-outline {
padding: 4px;
border: 1px solid #39adff;
background-color: #FFF
}
.img-hover {
position: absolute;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
transition: all .35s
}
.img-hover:hover {
background-color: rgba(0, 0, 0, 0.5)
}
.img-hover i {
position: absolute;
font-size: 12px;
color: #FFF;
top: 50%;
right: 50%;
margin-right: -18px;
margin-top: -18px;
padding: 10px;
border-radius: 4px;
border: 1px solid #FFF;
opacity: 0;
z-index: -1;
-webkit-transition: all .55s;
-moz-transition: all .55s;
-o-transition: all .55s;
transition: all .55s
}
.img-hover:hover i {
opacity: 1;
z-index: 1
}
.img-hover i:hover {
color: #39adff;
background-color: #FFF
}
.blog-img-wrapper .img-thumb {
height: 250px
}
.blog-img-wrapper {
position: relative;
border-radius: 4px
}
.blog-hover {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
color: #FFF;
background-color: rgba(0, 0, 0, 0.5);
border: 3px solid #39adff;
opacity: 0;
-webkit-transition: all .45s;
-moz-transition: all .45s;
-o-transition: all .45s;
transition: all .45s;
z-index: 10;
border-radius: 4px
}
.blog-hover i {
position: relative;
font-size: 12px;
top: 1px
}
.blog-hover-buttons {
position: absolute;
top: 50%;
width: 100%;
margin-top: -12px;
color: #FFF;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-o-transition: all .25s;
transition: all .25s
}
hr.clear {
clear: both;
}
.blog-hover-buttons a {
font-family: 'Roboto Slab', sans-serif;
border: 1px solid #FFF;
border-radius: 4px;
padding: 8px 10px;
margin: 0 1px;
color: #FFF;
font-weight: 700;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-o-transition: all .25s;
transition: all .25s
}
.blog-hover-buttons a:hover {
background-color: #FFF;
color: #39adff;
border: 1px solid #FFF
}
.blog-hover:hover {
opacity: 1
}
.blog-text {
position: relative;
margin-bottom: 30px
}
#blog h6 {
font-weight: 400
}
#blog-posts h2 a,
#blog-posts h2 a:visited,
#blog-posts-masonry h4 a,
#blog-posts-masonry h4 a:visited,
#blog h4 a,
#blog h4 a:visited {
color: #39adff
}
#blog-posts h2 a:hover,
#blog-posts h2 a:active,
#blog-posts-masonry h4 a:hover,
#blog-posts-masonry h4 a:active,
#blog h4 a:hover,
#blog h4 a:active {
color: #555
}
#blog-posts hr {
margin-bottom: 40px
}
#blog-posts .blog-img-wrapper .img-thumb {
height: 450px
}
.img-overlay1:after {
background: url(../img/pat1.png) repeat;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: .5
}
.img-overlay2:after {
background: url(../img/pat2.png) repeat;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: .5
}
.img-overlay3:after {
background: url(../img/pat3.png) repeat;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: .5
}
.img-overlay4:after {
background: url(../img/pat4.png) repeat;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: .5
}
.transparent {
background: transparent!important
}
.img-overlay-solid {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0
}
.blogbutton {
float: right;
background-color: #3071a7;
padding: 10px;
color: #fff !important;
}
.blogbutton a {
color: #fff !important;
}
@media (min-width: 991px) {
#blog .col-md-4:nth-child(3n+1) {
clear: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<section id="blog">
<div class="fullwidth-section">
<div class="container">
<div class="row" style="margin-bottom: 60px;">
<div class="col-md-12">
<h1 class=" kill-top-margin uppercase">The Dental Blog</h1>
<div style="font-size: 18px" class="weight-400"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/are-dental-implants-in-your-future/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/05/bigstock-Dental-Implant-detailed-view-39564646small-1140x632.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/05/bigstock-Dental-Implant-detailed-view-39564646small-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/are-dental-implants-in-your-future/">Are Dental Implants in Your Future?</a></h4>
<h6>by Bruce McArthur DDS on May 5, 2016</h6>
<p>Dental implants: they’re not just for grandma anymore! The dental implant market is exploding with a growth rate of 9.7 percent between 2014 and 2020. Why this sudden boom? One major reason is that the materials and technology behind
implants …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/are-dental-implants-in-your-future/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/are-dental-implants-in-your-future/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/dental-sealants-101/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/dental-sealants.png" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/dental-sealants.png');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/dental-sealants-101/">Dental Sealants 101</a></h4>
<h6>by Bruce McArthur DDS on April 27, 2016</h6>
<p>The majority of children who regularly visit the dentist will have dental sealants placed on their back teeth while they are still very young. If your dentist has made mention of dental sealants, you may have some questions about what …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/dental-sealants-101/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/dental-sealants-101/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/palatal-expanders-what-they-help-and-how/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/0807151021-1140x641.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/0807151021-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/palatal-expanders-what-they-help-and-how/">Palatal Expanders: What They Help… and How</a></h4>
<h6>by Bruce McArthur DDS on April 20, 2016</h6>
<p>You may think of your child’s orthodontist as someone who has the ability to reposition crooked teeth, but did you know that they can also expand an individual’s upper jaw? Through the usage of palatal expanders, orthodontists
have the ability …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/palatal-expanders-what-they-help-and-how/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/palatal-expanders-what-they-help-and-how/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/cosmetic-dentistry-and-the-holy-grail-of-the-perfect-smile/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/CosmeticDentistry.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/CosmeticDentistry-433x320.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/cosmetic-dentistry-and-the-holy-grail-of-the-perfect-smile/">Cosmetic Dentistry and the Holy Grail of the Perfect Smile</a></h4>
<h6>by Bruce McArthur DDS on April 13, 2016</h6>
<p>What is it that attracts you to others? If you’re like most people, you’re drawn to and captivated by a dazzling smile. People who smile big for all the world to see are happy, vibrant, and confident. Why? Because they …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/cosmetic-dentistry-and-the-holy-grail-of-the-perfect-smile/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/cosmetic-dentistry-and-the-holy-grail-of-the-perfect-smile/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/how-porcelain-veneers-can-improve-your-smile/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/how-to-whiten-porcelain-veneers.png" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/how-to-whiten-porcelain-veneers-433x433.png');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/how-porcelain-veneers-can-improve-your-smile/">How Porcelain Veneers Can Improve Your Smile</a></h4>
<h6>by Bruce McArthur DDS on April 6, 2016</h6>
<p>We all want healthy teeth. Good oral hygiene, after all, impacts all aspects of health and longevity. But just because your mouth is free from any cavities or gum disease doesn’t necessarily guarantee that your teeth are attractive. For one
…
</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/how-porcelain-veneers-can-improve-your-smile/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/how-porcelain-veneers-can-improve-your-smile/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/a-few-simple-ways-to-protect-your-childrens-teeth/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/child-at-dentist-small.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/child-at-dentist-small-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/a-few-simple-ways-to-protect-your-childrens-teeth/">A Few Simple Ways to Protect Your Children’s Teeth</a></h4>
<h6>by Bruce McArthur DDS on March 31, 2016</h6>
<p>By the time your child hits the age of 12 or 13 years old, his or her adult teeth will have all settled in for a permanent stay. This means that as a parent, you only have a few years …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/a-few-simple-ways-to-protect-your-childrens-teeth/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/a-few-simple-ways-to-protect-your-childrens-teeth/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-2-of-2/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/toothache.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/toothache-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-2-of-2/">10 Common Causes of Toothaches, part 2 of 2</a></h4>
<h6>by Bruce McArthur DDS on March 23, 2016</h6>
<p>Few things can be as annoying or interruptive as a toothache. When the pain is severe, it’s often difficult to go about your daily routine. It’s been known to bring even the toughest men and women to their knees, and …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-2-of-2/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-2-of-2/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-1-of-2/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/man-toothache-1140x760.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/man-toothache-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-1-of-2/">10 Common Causes of Toothaches, part 1 of 2</a></h4>
<h6>by Bruce McArthur DDS on March 17, 2016</h6>
<p>Anyone who has ever had a toothache can tell you that it’s not pleasant. In fact, the pain of a toothache can get so intense that it’s difficult to even think straight at times. When you experience a toothache, it …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-1-of-2/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-1-of-2/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/bad-breath-doesnt-have-to-ruin-your-day/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/bad-breath-1140x760.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/bad-breath-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/bad-breath-doesnt-have-to-ruin-your-day/">Bad Breath Doesn’t Have to Ruin Your Day</a></h4>
<h6>by Bruce McArthur DDS on March 10, 2016</h6>
<p>We all want to think that our breath smells just wonderfully, but the truth is that millions of people experience bad breath every day. The problem is that it’s difficult to know when you have bad breath until someone points …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/bad-breath-doesnt-have-to-ruin-your-day/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/bad-breath-doesnt-have-to-ruin-your-day/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="blogbutton">
<a href="/blog/"> View All Posts </a>
</div>
</div>
</div>
</section>
我目前正在为一个自由客户开发一个被黑的 wordpress 网站,他们的博客部分存在重大问题。博客部分的第 3 行下降到 2 行。非常感谢任何建议或帮助。
这是 link:http://brucemcarthurdentistrylakewood.com/ 如果您单击顶部的博客,它会向下滚动到我所指的部分。
这是 bootstrap 的一个常见问题,当您将多列换行在一行中时。在您的情况下,这是因为并非所有博客栏的高度都相同。在这种情况下,"How Porcelain Veneers Can Improve Your Smile" 是 542px 高,而几乎所有其他东西都是 521px 高。
如果您将博客部分的最大高度设置为 521 像素,问题就会解决。请参阅下面的屏幕截图:
解决不可见布局问题的一个有用工具是 firefox 的 3D 视图工具。您可以在此处了解更多相关信息:https://developer.mozilla.org/en-US/docs/Tools/3D_View
您只需清除在正确断点处浮动的列,因为您有不同高度的列。参见 MDN Clear you can also read about Bootstraps built-in clearing utilities here: Resets。
注意:您需要确保仅将此应用到要清除的网格区域,因此请使用规范来声明此内容或添加额外的 class 如果你需要的话。
col-md-4
意味着 nth-child(3n+1) @ 991px 以上所以:
@media (min-width: 991px) {
#blog .col-md-4:nth-child(3n+1) {
clear: left;
}
}
工作示例:
@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800";
@import "http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300";
html {
-webkit-font-smoothing: antialiased!important;
font-smoothing: antialiased!important;
text-rendering: optimizeLegibility!important;
overflow-x: hidden;
width: 100%;
height: 100%;
position: relative
}
body {
font-family: 'Open Sans', sans-serif;
background-color: #FFF;
color: #777;
font-size: 13px;
font-weight: 400;
line-height: 1.64285;
overflow-x: hidden;
height: auto;
position: relative
}
a,
a:link,
a:visited {
text-decoration: none;
color: #555;
outline: 0;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-o-transition: all .25s;
transition: all .25s
}
a:active,
a:hover {
color: #39adff;
outline: 0
}
section {
position: relative
}
.bg-img {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: repeat;
background-position: center center
}
.fullwidth-section {
position: relative;
padding-top: 100px;
padding-bottom: 100px
}
.kill-top-margin {
margin-top: 0!important
}
.kill-bottom-margin {
margin-bottom: 0!important
}
.kill-top-padding {
padding-top: 0!important
}
.kill-bottom-padding {
padding-bottom: 0!important
}
.img-center {
margin: 0 auto
}
.rounded {
border-radius: 1000px!important
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: 'Roboto Slab', sans-serif;
font-weight: 700;
color: #555;
line-height: 1.4;
position: relative;
z-index: 1
}
h1,
h2,
h3 {
margin-top: 30px;
margin-bottom: 30px
}
h4,
h5,
h6 {
margin-top: 15px;
margin-bottom: 10px
}
h1,
.h1 {
font-size: 36px;
margin-top: 40px;
margin-bottom: 20px;
line-height: 1.2;
color: #39adff
}
h2,
.h2 {
font-size: 30px
}
h3,
.h3 {
font-size: 24px
}
h4,
.h4 {
font-size: 18px
}
h5,
.h5 {
font-size: 14px
}
h6,
.h6 {
font-size: 12px
}
img,
.wp-post-image {
max-width: 100% !important;
height: auto !important;
border-radius: 4px
}
.img-thumb {
position: relative;
width: 100%;
overflow: hidden;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
border-radius: 4px
}
.img-float-left {
position: relative;
float: left;
border-radius: 1px;
margin: 20px 20px 20px 0;
padding: 0;
max-width: 100%
}
.img-float-right {
position: relative;
float: right;
border-radius: 1px;
margin: 20px 0 20px 20px;
padding: 0;
max-width: 100%
}
.img-outline {
padding: 4px;
border: 1px solid #39adff;
background-color: #FFF
}
.img-hover {
position: absolute;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
transition: all .35s
}
.img-hover:hover {
background-color: rgba(0, 0, 0, 0.5)
}
.img-hover i {
position: absolute;
font-size: 12px;
color: #FFF;
top: 50%;
right: 50%;
margin-right: -18px;
margin-top: -18px;
padding: 10px;
border-radius: 4px;
border: 1px solid #FFF;
opacity: 0;
z-index: -1;
-webkit-transition: all .55s;
-moz-transition: all .55s;
-o-transition: all .55s;
transition: all .55s
}
.img-hover:hover i {
opacity: 1;
z-index: 1
}
.img-hover i:hover {
color: #39adff;
background-color: #FFF
}
.blog-img-wrapper .img-thumb {
height: 250px
}
.blog-img-wrapper {
position: relative;
border-radius: 4px
}
.blog-hover {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
color: #FFF;
background-color: rgba(0, 0, 0, 0.5);
border: 3px solid #39adff;
opacity: 0;
-webkit-transition: all .45s;
-moz-transition: all .45s;
-o-transition: all .45s;
transition: all .45s;
z-index: 10;
border-radius: 4px
}
.blog-hover i {
position: relative;
font-size: 12px;
top: 1px
}
.blog-hover-buttons {
position: absolute;
top: 50%;
width: 100%;
margin-top: -12px;
color: #FFF;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-o-transition: all .25s;
transition: all .25s
}
hr.clear {
clear: both;
}
.blog-hover-buttons a {
font-family: 'Roboto Slab', sans-serif;
border: 1px solid #FFF;
border-radius: 4px;
padding: 8px 10px;
margin: 0 1px;
color: #FFF;
font-weight: 700;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-o-transition: all .25s;
transition: all .25s
}
.blog-hover-buttons a:hover {
background-color: #FFF;
color: #39adff;
border: 1px solid #FFF
}
.blog-hover:hover {
opacity: 1
}
.blog-text {
position: relative;
margin-bottom: 30px
}
#blog h6 {
font-weight: 400
}
#blog-posts h2 a,
#blog-posts h2 a:visited,
#blog-posts-masonry h4 a,
#blog-posts-masonry h4 a:visited,
#blog h4 a,
#blog h4 a:visited {
color: #39adff
}
#blog-posts h2 a:hover,
#blog-posts h2 a:active,
#blog-posts-masonry h4 a:hover,
#blog-posts-masonry h4 a:active,
#blog h4 a:hover,
#blog h4 a:active {
color: #555
}
#blog-posts hr {
margin-bottom: 40px
}
#blog-posts .blog-img-wrapper .img-thumb {
height: 450px
}
.img-overlay1:after {
background: url(../img/pat1.png) repeat;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: .5
}
.img-overlay2:after {
background: url(../img/pat2.png) repeat;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: .5
}
.img-overlay3:after {
background: url(../img/pat3.png) repeat;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: .5
}
.img-overlay4:after {
background: url(../img/pat4.png) repeat;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: .5
}
.transparent {
background: transparent!important
}
.img-overlay-solid {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0
}
.blogbutton {
float: right;
background-color: #3071a7;
padding: 10px;
color: #fff !important;
}
.blogbutton a {
color: #fff !important;
}
@media (min-width: 991px) {
#blog .col-md-4:nth-child(3n+1) {
clear: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<section id="blog">
<div class="fullwidth-section">
<div class="container">
<div class="row" style="margin-bottom: 60px;">
<div class="col-md-12">
<h1 class=" kill-top-margin uppercase">The Dental Blog</h1>
<div style="font-size: 18px" class="weight-400"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/are-dental-implants-in-your-future/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/05/bigstock-Dental-Implant-detailed-view-39564646small-1140x632.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/05/bigstock-Dental-Implant-detailed-view-39564646small-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/are-dental-implants-in-your-future/">Are Dental Implants in Your Future?</a></h4>
<h6>by Bruce McArthur DDS on May 5, 2016</h6>
<p>Dental implants: they’re not just for grandma anymore! The dental implant market is exploding with a growth rate of 9.7 percent between 2014 and 2020. Why this sudden boom? One major reason is that the materials and technology behind
implants …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/are-dental-implants-in-your-future/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/are-dental-implants-in-your-future/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/dental-sealants-101/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/dental-sealants.png" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/dental-sealants.png');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/dental-sealants-101/">Dental Sealants 101</a></h4>
<h6>by Bruce McArthur DDS on April 27, 2016</h6>
<p>The majority of children who regularly visit the dentist will have dental sealants placed on their back teeth while they are still very young. If your dentist has made mention of dental sealants, you may have some questions about what …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/dental-sealants-101/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/dental-sealants-101/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/palatal-expanders-what-they-help-and-how/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/0807151021-1140x641.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/0807151021-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/palatal-expanders-what-they-help-and-how/">Palatal Expanders: What They Help… and How</a></h4>
<h6>by Bruce McArthur DDS on April 20, 2016</h6>
<p>You may think of your child’s orthodontist as someone who has the ability to reposition crooked teeth, but did you know that they can also expand an individual’s upper jaw? Through the usage of palatal expanders, orthodontists
have the ability …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/palatal-expanders-what-they-help-and-how/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/palatal-expanders-what-they-help-and-how/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/cosmetic-dentistry-and-the-holy-grail-of-the-perfect-smile/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/CosmeticDentistry.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/CosmeticDentistry-433x320.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/cosmetic-dentistry-and-the-holy-grail-of-the-perfect-smile/">Cosmetic Dentistry and the Holy Grail of the Perfect Smile</a></h4>
<h6>by Bruce McArthur DDS on April 13, 2016</h6>
<p>What is it that attracts you to others? If you’re like most people, you’re drawn to and captivated by a dazzling smile. People who smile big for all the world to see are happy, vibrant, and confident. Why? Because they …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/cosmetic-dentistry-and-the-holy-grail-of-the-perfect-smile/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/cosmetic-dentistry-and-the-holy-grail-of-the-perfect-smile/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/how-porcelain-veneers-can-improve-your-smile/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/how-to-whiten-porcelain-veneers.png" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/how-to-whiten-porcelain-veneers-433x433.png');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/how-porcelain-veneers-can-improve-your-smile/">How Porcelain Veneers Can Improve Your Smile</a></h4>
<h6>by Bruce McArthur DDS on April 6, 2016</h6>
<p>We all want healthy teeth. Good oral hygiene, after all, impacts all aspects of health and longevity. But just because your mouth is free from any cavities or gum disease doesn’t necessarily guarantee that your teeth are attractive. For one
…
</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/how-porcelain-veneers-can-improve-your-smile/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/how-porcelain-veneers-can-improve-your-smile/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/a-few-simple-ways-to-protect-your-childrens-teeth/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/child-at-dentist-small.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/04/child-at-dentist-small-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/a-few-simple-ways-to-protect-your-childrens-teeth/">A Few Simple Ways to Protect Your Children’s Teeth</a></h4>
<h6>by Bruce McArthur DDS on March 31, 2016</h6>
<p>By the time your child hits the age of 12 or 13 years old, his or her adult teeth will have all settled in for a permanent stay. This means that as a parent, you only have a few years …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/a-few-simple-ways-to-protect-your-childrens-teeth/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/a-few-simple-ways-to-protect-your-childrens-teeth/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-2-of-2/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/toothache.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/toothache-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-2-of-2/">10 Common Causes of Toothaches, part 2 of 2</a></h4>
<h6>by Bruce McArthur DDS on March 23, 2016</h6>
<p>Few things can be as annoying or interruptive as a toothache. When the pain is severe, it’s often difficult to go about your daily routine. It’s been known to bring even the toughest men and women to their knees, and …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-2-of-2/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-2-of-2/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-1-of-2/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/man-toothache-1140x760.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/man-toothache-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-1-of-2/">10 Common Causes of Toothaches, part 1 of 2</a></h4>
<h6>by Bruce McArthur DDS on March 17, 2016</h6>
<p>Anyone who has ever had a toothache can tell you that it’s not pleasant. In fact, the pain of a toothache can get so intense that it’s difficult to even think straight at times. When you experience a toothache, it …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-1-of-2/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/10-common-causes-of-toothaches-part-1-of-2/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-img-wrapper">
<div class="blog-hover">
<div class="blog-hover-buttons">
<a href="http://brucemcarthurdentistrylakewood.com/bad-breath-doesnt-have-to-ruin-your-day/"><i class="im-redo2"></i></a>
<a data-pp="prettyPhoto[portfolio]" href="http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/bad-breath-1140x760.jpg" title=""><i class="im-expand2"></i></a>
</div>
</div>
<div class="img-thumb" style="background-image: url('http://brucemcarthurdentistrylakewood.com/wp-content/uploads/2016/03/bad-breath-433x433.jpg');">
</div>
</div>
<div class="blog-text">
<h4><a href="http://brucemcarthurdentistrylakewood.com/bad-breath-doesnt-have-to-ruin-your-day/">Bad Breath Doesn’t Have to Ruin Your Day</a></h4>
<h6>by Bruce McArthur DDS on March 10, 2016</h6>
<p>We all want to think that our breath smells just wonderfully, but the truth is that millions of people experience bad breath every day. The problem is that it’s difficult to know when you have bad breath until someone points …</p>
<h6 class="pull-left"><a href="http://brucemcarthurdentistrylakewood.com/bad-breath-doesnt-have-to-ruin-your-day/#respond ">No Comment</a></h6>
<h6 class="pull-right"><a href="http://brucemcarthurdentistrylakewood.com/bad-breath-doesnt-have-to-ruin-your-day/">Read More <i class="fa fa-angle-double-right"></i></a></h6>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="blogbutton">
<a href="/blog/"> View All Posts </a>
</div>
</div>
</div>
</section>