Container-Fluid nicht volle Bildschirmbreite

Mein Container-Fluid-Element hat einen Rand auf der rechten Seite und eine Bildlaufleiste auf allen Bildschirmgrößen. Ich will das nicht.Container-Fluid nicht volle Bildschirmbreite

Diese Frage wurde bereits gestellt, aber keine der Antworten funktioniert für mich. Einige frühere Beiträge scheinen auch einigen anderen OP nicht geholfen zu haben.

Ich habe

versucht

.container-fluid{ 
padding: 0; 
} 
.container-fluid{ 
padding: 0 !important; 
} 

section { 
background-size: cover; 
}

aber sie funktionieren nicht.

Hier ist mein html:

<section class="container-fluid" id="portfolio"> 

<h3 id="portfolio-title">PORTFOLIO</h3> 
    <div> 
     <div class="col-sm-4 col-xs-6 custom-column"> 
     <a href="http://codepen.io/SimmoSim/" target="_blank"> 
      <!--for image opacity --><div class="element"> 
      <img src="http://res.cloudinary.com/simmosim/image/upload/v1489655509/web-design_wlv0vi.jpg" alt="Web design" width="100%"></div></a><h4>Web Design</h4> 
     </div> 

     <div class="col-sm-4 col-xs-6 custom-column"> 
      <a href="https://simmosimpson.wordpress.com/portfolio/" target="_blank"><!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655007/bass-guitar-blue-dry-ice_ov3l6m.jpg" alt="My photograph" width="100%"></div></a> 
     <h4>Photography</h4> 
     </div> 

     <div class="col-sm-4 col-xs-6 custom-column"> 
       <a href="https://nomadapprentice.wordpress.com/" target="_blank"> 
       <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655008/blog-desk_dewden.jpg" alt="My blog" width="100%"></div></a> 
     <h4>Blog</h4> 
     </div> 


     <div class="col-sm-4 col-xs-6 custom-column"> 
     <a href="https://www.facebook.com/SimmoSimpsonMusic/" target="_blank"> 
      <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655006/Simmo-music_zb0yqg.jpg" alt="My music" width="100%"></div></a> 
     <h4>Music</h4> 
     </div> 

     <div class="col-sm-4 col-xs-6 custom-column"> 
      <a href="https://www.facebook.com/effectivealtruismtaipei/" target="_blank"> 
       <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655004/Effective-Altruism-Logo_uove4m.jpg" alt="EA logo" width="100%"></div></a> 
     <h4>Effective Altruism</h4> 
     </div> 

     <div class="col-sm-4 col-xs-6 custom-column"> 
       <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655008/TBC_fuzthv.jpg" alt="My future" width="100%"></div> 
     <h4>TBC</h4> 
     </div> 
    </div>

... Und mein CSS:

.container-fluid { 
padding: 0 !important; 
} 

section { 
background-size: cover; 
} 

div { 
text-align: center; 
}

Hilfe sehr geschätzt!

Quelle

2017-03-17 sim

ich kein Problem mit Ihrem Code sehen https://www.codeply.com/go/Ws5OMcLcXb sind Sie sind sicher, dass kein anderes Element auf der Seite übergelaufen ist. – neophyte

Irgendwelche Gedanken darüber, warum ich an meinem Ende ein Problem haben könnte @neophyte? – sim

Sie können die ganze Sache hier sehen: http://codepen.io/SimmoSim/pen/wJgpwg?editors=1100 – sim

Es ist nicht, weil die Container-Flüssigkeit, sondern Ihr Zeilenelement einen Rand rechts von 15px hat.

Your codepen updated

fügen Sie einfach

.row { 
margin-right: 0px; 
}

.row 
 
{ 
 
margin-right: 0px; 
 
}

<head> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
<nav class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"><h5>Simmo Simpson Web Design</h5></a> 
 
     <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#home"><h5>Home</h5></a></li> 
 
      <li><a href="#about"><h5>About</h5></a></li> 
 
      <li><a href="#portfolio"><h5>Portfolio</h5></a></li> 
 
      <li><a href="#contact" ><h5>Contact</h5></a></li> 
 
     </ul> 
 
    </div> 
 
</nav> 
 
    
 
    
 
<div id="about" class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-5 custom-about"> 
 
      <img class="img-responsive" id="my-face" src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" class="img-circle" alt="My face"> 
 
     </div> 
 
      
 
     <div class="col-xs-7 custom-about"> 
 
      <h1>Simmo Simpson</h1><br> 
 
      <h2>Freelance Web Design & Photography<br> 
 
       Feel free to take a look at my work</h2><br> 
 
      <p>Need a website? Some quality photography?<br>I'm your man!<br> 
 
      </div> 
 
    </div> 
 

 

 
      
 
<section class="container-fluid" id="portfolio"> 
 
    
 
    <h3 id="portfolio-title">PORTFOLIO</h3> 
 
     <div> 
 
      <div class="col-sm-4 col-xs-6 custom-column"> 
 
      <a href="http://codepen.io/SimmoSim/" target="_blank"> 
 
       <!--for image opacity --><div class="element"> 
 
       <img src="http://res.cloudinary.com/simmosim/image/upload/v1489655509/web-design_wlv0vi.jpg" alt="Web design" width="100%"></div></a><h4>Web Design</h4> 
 
      </div> 
 
      
 
      <div class="col-sm-4 col-xs-6 custom-column"> 
 
       <a href="https://simmosimpson.wordpress.com/portfolio/" target="_blank"><!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655007/bass-guitar-blue-dry-ice_ov3l6m.jpg" alt="My photograph" width="100%"></div></a> 
 
      <h4>Photography</h4> 
 
      </div> 
 
      
 
      <div class="col-sm-4 col-xs-6 custom-column"> 
 
        <a href="https://nomadapprentice.wordpress.com/" target="_blank"> 
 
        <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655008/blog-desk_dewden.jpg" alt="My blog" width="100%"></div></a> 
 
      <h4>Blog</h4> 
 
      </div> 
 
      
 
    
 
      <div class="col-sm-4 col-xs-6 custom-column"> 
 
      <a href="https://www.facebook.com/SimmoSimpsonMusic/" target="_blank"> 
 
       <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655006/Simmo-music_zb0yqg.jpg" alt="My music" width="100%"></div></a> 
 
      <h4>Music</h4> 
 
      </div> 
 
      
 
      <div class="col-sm-4 col-xs-6 custom-column"> 
 
       <a href="https://www.facebook.com/effectivealtruismtaipei/" target="_blank"> 
 
        <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655004/Effective-Altruism-Logo_uove4m.jpg" alt="EA logo" width="100%"></div></a> 
 
      <h4>Effective Altruism</h4> 
 
      </div> 
 
      
 
      <div class="col-sm-4 col-xs-6 custom-column"> 
 
        <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655008/TBC_fuzthv.jpg" alt="My future" width="100%"></div> 
 
      <h4>TBC</h4> 
 
      </div> 
 
     </div> 
 
    
 
</section>  
 

 
    <h3 id="contact">CONTACT ME</h3> 
 
     <div> 
 
      <br><p style="padding-left:5%" class="text-right">Drop me a line on your prefered social media<br> platform by clicking a link below.<br><br> 
 
       </p> 
 
     </div> 
 

 
<div class="footer-social-icons"> 
 
    <ul class="social-icons custom-social-icon"> 
 
     <li><a href="https://www.facebook.com/simmophotography" target="_blank" class="social-icon"> <i class="fa fa-facebook custom-social-icon"></i></a></li> 
 
     <li><a href="https://twitter.com/TweetSimmo" target="_blank" class="social-icon"> <i class="fa fa-twitter custom-social-icon"></i></a></li> 
 
     <li><a href="https://www.linkedin.com/in/simpsonuk/" target="_blank" class="social-icon"> <i class="fa fa-linkedin custom-social-icon"></i></a></li> 
 
     <li><a href="https://www.instagram.com/simmosimpson/" target="_blank" class="social-icon"> <i class="fa fa-instagram custom-social-icon"></i></a></li> 
 
     <li><a href="https://nomadapprentice.wordpress.com/" target="_blank" class="social-icon"> <i class="fa fa-wordpress custom-social-icon"></i></a></li> 
 
     <li><a href="https://github.com/simmosim" target="_blank" class="social-icon"> <i class="fa fa-github"></i></a></li> 
 
    </ul> 
 
    <br> 
 
</div> 
 

 

 

 
    </body> 
 

 
</html>

Quelle

2017-03-17 03:47:53 neophyte

Ja! Vielen Dank!! Liegt das daran, dass Zeilenelemente immer einen Standard-rechten Rand von 15px haben? – sim

nein normalerweise der Rand rechts: -15px; Ich weiß nicht, was in deinem Fall schief gelaufen ist ... Ich bin auch neugierig, dich wissen zu lassen, sobald ich es herausgefunden habe. – neophyte

Danke @neophyte Ich freue mich zu hören, was Sie finden! – sim

Container-Fluid nicht volle Bildschirmbreite

Antwort

Verwandte Themen