2017-03-17 10 views
3

私のコンテナ流体要素は、すべての画面サイズで、右側にマージンを、下にスクロールバーを表示します。私はこれを望んでいない。コンテナ流体フルスクリーン幅ではない

この質問は以前に聞かれましたが、答えの中で答えがうまくいきません。以前の記事の中には、他の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; 
} 

ヘルプははるかに高く評価します!

+0

を追加https://www.codeply.com/go/Ws5OMcLcXbありますあなたは他の要素がページにあふれていないことを確かめてください。 – neophyte

+0

なぜ私は@neophyteの最後に問題があるのでしょうか? – sim

+0

あなたはここにすべてを見ることができます:http://codepen.io/SimmoSim/pen/wJgpwg?editors=1100 – sim

答えて

3

コンテナ流体ではなく、行要素の余白が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>

+0

はい!ありがとうございました!!これは、行要素が常に15pxのデフォルトの右マージンを持つためですか? – sim

+0

通常はmargin-right:-15px;私はあなたのケースで何がうまくいかなかったのか分かりません。私はそれがわかるとあなたに知らせてもらいたいのです。 – neophyte

+0

ありがとうございます@neophyte私はあなたが何を見つけるのを楽しみにしています! – sim

関連する問題