Ich arbeite gerade an einer gehackten Wordpress-Seite für einen freiberuflichen Kunden und habe ein großes Problem mit ihrem Blog-Bereich. Die dritte Reihe der Blog-Sektion stürzt auf 2 Zeilen ab. Jeder Rat oder jede Hilfe wird sehr geschätzt.Wordpress - Bootstrap Alignment
Hier ist der Link: http://brucemcarthurdentistrylakewood.com/ Wenn du oben auf Blog klickst, blättert du runter zu dem Abschnitt, auf den ich mich beziehe.
Dies ist ein häufiges Problem beim Bootstrap, wenn Sie mehrere Spalten in einer einzelnen Zeile umbrechen. In Ihrem Fall geschieht dies aufgrund der Tatsache, dass nicht alle Ihre Blog-Spalten die gleiche Höhe haben. In diesem Fall ist "Wie Porzellan Veneers Ihr Lächeln verbessern kann" 542px hoch, während fast alles andere, wenn 521px hoch ist.
Wenn Sie eine maximale Höhe von 521px Ihrer Blogabschnitte festlegen, ist das Problem gelöst. Siehe Abbildung unten:
Ein nützliches Werkzeug für die Lösung von unsichtbaren Layout-Problemen ist das 3D-Ansicht-Tool für Firefox. Sie können mehr darüber hier erfahren: https://developer.mozilla.org/en-US/docs/Tools/3D_View
Sie müssen nur die Spalten float am richtigen Haltepunkt löschen, da Sie Spalten unterschiedlicher Höhe haben. Siehe MDN Clear Sie können auch über eingebaute Bootstraps Clearing Utilities hier lesen: Resets.
Hinweis: Sie sollten sicherstellen, dass Sie nur diese Bereiche des Rasters, die Sie löschen möchten, verwenden, verwenden Sie die Spezifikation, um dies zu deklarieren oder eine zusätzliche Klasse hinzuzufügen, wenn Sie müssen.
col-md-4 bedeutet, n-Kind (3n + 1) @ oben 991px so:
@media (min-width: 991px) {
#blog .col-md-4:nth-child(3n+1) {
clear: left;
}
}
Arbeitsbeispiel:
@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>
Das funktionierte perfekt! Vielen Dank! –
Kein Problem! Wenn Sie diese Antwort hilfreich finden, akzeptieren Sie sie bitte als korrekt. – jbrya029