容器流体非全屏宽度

我的容器流体元素在所有屏幕尺寸的右侧都有一个边缘，底部有一个滚动条。我不想要这个。容器流体非全屏宽度

这个问题之前已经问过，但没有答案对我有用。以前的一些帖子似乎也没有帮助其他一些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

容器流体非全屏宽度

回答

相关问题