容器流体不是全屏宽度

时间：2017-03-17 03:22:00

标签： html twitter-bootstrap css3 containers sections

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

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

非常感谢！

1 个答案:

答案 0 :(得分：4)

这不是因为容器流体，而是你的行元素的边距为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>

相关问题
最新问题