1. Zuhause
  2. Frage und Antwort
  3. Bootstrap Clearfix Problem

Bootstrap Clearfix Problem

2016-05-12 17 views
0

Ich bin ein bisschen ein Programmier Anfänger so würde mich freuen, wenn mir jemand mit einem kleinen Clearfix Problem auf einem Bootstrap-Grid helfen könnte.Bootstrap Clearfix Problem

Mein Raster passt perfekt für die Voreinstellungen lg, md und sm, aber nicht für xs.

Ich möchte meine xs genau so aussehen wie sm. Also 2 Spalten, 3 Zeilen.

Wenn jemand beraten könnte würde ich es sehr schätzen.

Vielen Dank.

<style type="text/css"> 
 
    */p{ 
 
     padding: 50px; 
 
     font-size: 32px; 
 
     font-weight: bold; 
 
     text-align: center; 
 
     background: #dbdfe5; 
 
    } 
 
    img.image-4-3.home-services-images { 
 
    display: block; 
 
    float: none; 
 
    clear: none; 
 
    margin: 0 auto; 
 
    max-width: 150px; 
 
    padding-bottom: 20px; 
 
} 
 
    
 
    #spider2 { 
 
     margin-top: -50px; 
 
    } 
 
     #spider7 { 
 
     margin-top: -50px; 
 
    } 
 
     #spider9 { 
 
     margin-top: -50px; 
 
    } 
 
    
 
    @media screen and (max-width: 992px) and (min-width: 0px) { 
 
#spider2, #spider7, #spider9 { 
 
      margin-top: 0px !important; 
 
} 
 
} 
 
</style>
<!DOCTYPE html> 
 
    <html> 
 

 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <title>Index</title> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    </head> 
 

 
    <body> 
 

 
    <div class="container"> 
 
     <div class="row"> 
 
          <div id="spider1" class="col-xs-6 col-md-4"> \t <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
    <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
    <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div> 
 
          <div id="spider2" class="col-xs-6 col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
    <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
    <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div> 
 
      <div class="clearfix visible-xs-block"></div> 
 
          <div id="spider3" class="col-xs-6 col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
    <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
    <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div> 
 
      <div class="clearfix visible-md-block"></div> 
 
      <div class="clearfix visible-lg-block"></div> 
 
          <div id="spider4" class="hidden-xs hidden-sm col-md-4">&nbsp;</div> 
 
      <div class="clearfix visible-xs-block"></div> 
 
          <div id="spider5" class="hidden-xs hidden-sm col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /></div> 
 
          <div id="spider6" class="hidden-xs hidden-sm col-md-4">&nbsp;</div> 
 
      <div class="clearfix visible-md-block"></div> 
 
      <div class="clearfix visible-lg-block"></div> 
 
      <div class="clearfix visible-xs-block"></div> 
 
          <div id="spider7" class="col-xs-6 col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
    <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
    <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div> 
 
      <div class="clearfix visible-xs-block"></div> 
 
          <div id="spider8" class="col-xs-6 col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
    <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
    <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div> 
 
      <div class="clearfix visible-xs-block"></div> 
 
          <div id="spider9" class="col-xs-6 col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
    <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
    <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div> 
 
      </div> 
 
    </div> 
 
     </body> 
 
     </html>

Quelle

2016-05-12 Myles George

Antwort

0

Überprüfen Sie bitte das Ergebnis:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
p { 
 
    padding: 50px; 
 
    font-size: 32px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    background: #dbdfe5; 
 
} 
 
img.image-4-3.home-services-images { 
 
    display: block; 
 
    float: none; 
 
    clear: none; 
 
    margin: 0 auto; 
 
    max-width: 150px; 
 
    padding-bottom: 20px; 
 
} 
 
#spider2 { 
 
    margin-top: -50px; 
 
} 
 
#spider7 { 
 
    margin-top: -50px; 
 
} 
 
#spider9 { 
 
    margin-top: -50px; 
 
} 
 
@media screen and (max-width: 992px) and (min-width: 0px) { 
 
    #spider2, 
 
    #spider7, 
 
    #spider9 { 
 
    margin-top: 0px !important; 
 
    } 
 
}
<div class="container"> 
 
    <div class="row"> 
 

 
    <div id="spider1" class="col-xs-6 col-md-4"> 
 
     <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
     <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
     <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span> 
 
     </p> 
 
    </div> 
 
    
 
    <div id="spider2" class="col-xs-6 col-md-4"> 
 
     <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
     <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
     <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span> 
 
     </p> 
 
    </div> 
 
    
 
    <div class="clearfix visible-xs visible-sm"></div> 
 
    
 
    <div id="spider3" class="col-xs-6 col-md-4"> 
 
     <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
     <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
     <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span> 
 
     </p> 
 
    </div> 
 
    
 
    <div class="clearfix hidden-xs hidden-sm"></div> 
 
    
 
    <div id="spider4" class="hidden-xs hidden-sm col-md-4"></div> 
 
    
 
    <div id="spider5" class="hidden-xs hidden-sm col-md-4"> 
 
     <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
    </div> 
 
    
 
    <div id="spider6" class="hidden-xs hidden-sm col-md-4"></div> 
 
    
 
    <div class="clearfix hidden-xs hidden-sm"></div> 
 
    
 
    <div id="spider7" class="col-xs-6 col-md-4"> 
 
     <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
     <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
     <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span> 
 
     </p> 
 
    </div> 
 
    
 
    <div class="clearfix visible-xs visible-sm"></div> 
 
    
 
    <div id="spider8" class="col-xs-6 col-md-4"> 
 
     <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
     <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
     <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span> 
 
     </p> 
 
    </div> 
 
    
 
    <div id="spider9" class="col-xs-6 col-md-4"> 
 
     <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> 
 
     <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> 
 
     <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span> 
 
     </p> 
 
    </div> 
 
    
 
    </div> 
 
</div>

Quelle

2016-05-12 23:00:07

0

In der XS-Haltepunkte für Bootstrap, Zeilen automatisch alle enthaltenen zwingen divs in Anzeige: Block und Breite : 100%, um den Inhalt vertikal auf einem schmalen, mobilen Geröll zu verteilen n.

Wenn Sie mehr als eine Spalte auf dem Handy speichern müssen, müssen Sie eine Klasse schreiben, um das Breakpoint-Verhalten zu überschreiben.

Beispiel:

HTML

<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 nobreak-2col"></div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 nobreak-2col"></div> 
</div>

CSS

@media only screen and (max-device-width : 480px) { 
    .nobreak-2col{ 
     display:inline !important; 
     width: 50% !important; 
    } 
}

Quelle

2016-05-12 23:01:19 Korgrue

Verwandte Themen

 Verwandte Themen