容器流體非全屏寬度

我的容器流體元素在所有屏幕尺寸的右側都有一個邊緣，底部有一個滾動條。我不想要這個。容器流體非全屏寬度

這個問題之前已經問過，但沒有答案對我有用。以前的一些帖子似乎也沒有幫助其他一些OP。

我已經試過

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

section { 
background-size: cover; 
}

，但他們沒有工作。

這裏是我的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>

...而我的CSS：

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

section { 
background-size: cover; 
} 

div { 
text-align: center; 
}

幫助非常感謝！

來源

2017-03-17 sim

我看不到你的代碼中的任何問題都https://www.codeply.com/go/Ws5OMcLcXb你確定你沒有任何其他元素在頁面中溢出。 – neophyte

有關爲什麼我可能在我的結尾處遇到問題的任何想法@neophyte？ – sim

你可以在這裏看到整個事情：http://codepen.io/SimmoSim/pen/wJgpwg?editors=1100 – sim

這不是因爲容器流體，而是你的行元素有15px的右邊距。

Your codepen updated

只需添加

.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>

來源

2017-03-17 03:47:53 neophyte

是的！謝謝！！這是因爲行元素總是有15px的默認右邊距？ – sim

沒有正常的保證金 - 右：-15px;我不知道你的情況出了什麼問題。一旦我弄清楚了，我也很好奇，讓你知道。 – neophyte

謝謝@neophyte我期待聽到你的發現！ – sim

容器流體非全屏寬度

回答

相關問題