ウェブサイトの右下に余分なスペースがあるのはなぜですか？

私は、ウェブサイトの下部と右側にある空白を削除しようとしています。右側には、それが黒いnavbarによって引き起こされたようだが、私はそれを修正する手掛かりを持っていない。ウェブサイトの右下に余分なスペースがあるのはなぜですか？

/* Navbar */ 
 

 
.navbar-default { 
 
    background-color: transparent; 
 
    border-color: transparent; 
 
} 
 

 
.navbar-fixed-top .navbar-brand, 
 
.navbar-fixed-top .navbar-nav>li>a { 
 
    color: #fff; 
 
} 
 

 
.navbar-default .navbar-toggle { 
 
    border-color: #000; 
 
} 
 

 
.navbar-default .navbar-toggle:focus, 
 
.navbar-default .navbar-toggle:hover { 
 
    background-color: #fff; 
 
} 
 

 
.navbar-default .navbar-toggle, 
 
.navbar-default .navbar-toggle { 
 
    background-color: transparent; 
 
} 
 

 
.navbar-fixed-top.scrolled { 
 
    background: black; 
 
} 
 

 
.navbar-toggle { 
 
    position: relative; 
 
    float: right; 
 
    padding: 9px 10px; 
 
    margin-top: 8px; 
 
    margin-right: 15px; 
 
    margin-bottom: 8px; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
} 
 

 
.non-underline { 
 
    text-decoration: none; 
 
} 
 

 
.navbar-fixed-top .navbar-brand, 
 
.navbar-fixed-top .navbar-nav>li>a { 
 
    color: #fff!important; 
 
} 
 

 
.navbar-fixed-top .navbar-brand, 
 
.navbar-fixed-top .navbar-nav>li>a:hover { 
 
    text-decoration: underline; 
 
    background-color: transparent; 
 
    color: #fff!important; 
 
} 
 

 
.navbar-nav>li>a:focus, 
 
.navbar-nav>li>a:active, 
 
.navbar-nav>li>a.active { 
 
    background-color: transparent; 
 
    color: #fff!important; 
 
} 
 

 
#logo-img { 
 
    width: 70%; 
 
} 
 

 

 
/* End Navbar */ 
 

 

 
/* Jumbotron */ 
 

 
#first { 
 
    padding: 0; 
 
} 
 

 
.jumbotron-image { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
h2>a { 
 
    color: #565656; 
 
} 
 

 
a:hover { 
 
    text-decoration: none; 
 
} 
 

 
#h1first { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    color: #FFF; 
 
    font-family: 'Philosopher', sans-serif; 
 
} 
 

 

 
/* End Jumbotron */ 
 

 

 
/* About */ 
 

 
#abouth2 { 
 
    visibility: hidden; 
 
} 
 

 
#about-section { 
 
    padding-top: 8%; 
 
    padding-bottom: 10%; 
 
} 
 

 
.fadeInBlock { 
 
    opacity: 0; 
 
} 
 

 
#p-about { 
 
    font-size: 180%; 
 
    font-family: 'Raleway', sans-serif; 
 
} 
 

 
#img-about { 
 
    padding: 0; 
 
} 
 

 

 
/*End About*/ 
 

 

 
/*Portfolio*/ 
 

 
#portfolio-section { 
 
    background-color: ; 
 
    background: #B5927E; 
 
    background: -webkit-linear-gradient(left top, #B5927E, #6C5461); 
 
    background: -o-linear-gradient(bottom right, #B5927E, #6C5461); 
 
    background: -moz-linear-gradient(bottom right, #B5927E, #6C5461); 
 
    background: linear-gradient(to bottom right, #B5927E, #6C5461); 
 
    padding-top: 2%; 
 
    padding-bottom: 10%; 
 
} 
 

 
.headline { 
 
    font-family: 'Merriweather', serif; 
 
    color: #484A4A; 
 
} 
 

 
.headline.fadeInBlock>a { 
 
    color: #484A4A; 
 
} 
 

 
.headline.fadeInBlock>a:hover { 
 
    color: #484A4A; 
 
} 
 

 
#portfolio-id { 
 
    margin-bottom: 2%; 
 
} 
 

 

 
/*End Portfolio*/ 
 

 

 
/*Contact*/ 
 

 
#contact-section { 
 
    background-color: #4D3C4F; 
 
    padding-top: 2%; 
 
    padding-bottom: 5%; 
 
} 
 

 
.social-icons { 
 
    color: #b7b7b7; 
 
} 
 

 
.fa { 
 
    font-size: 40px; 
 
    padding: 20px; 
 
    transition: 0.5s; 
 
} 
 

 
.fa-facebook-official { 
 
    vertical-align: middle; 
 
    margin: auto; 
 
} 
 

 
.fa-twitter { 
 
    vertical-align: middle; 
 
    margin: auto; 
 
} 
 

 
.fa-free-code-camp { 
 
    vertical-align: middle; 
 
    margin: auto; 
 
} 
 

 
.fa-envelope { 
 
    vertical-align: middle; 
 
    margin: auto; 
 
} 
 

 
#facebook:hover { 
 
    color: #3b5998; 
 
} 
 

 
#twitter:hover { 
 
    color: #00aced; 
 
} 
 

 
#fcc:hover { 
 
    color: #006401; 
 
} 
 

 
#email:hover { 
 
    color: #92b8f4; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 

 
/*End Contact*/ 
 

 

 
/*Footer*/ 
 

 
footer { 
 
    background-color: #382F4A; 
 
} 
 

 
#copy { 
 
    color: #FFFFFF; 
 
} 
 

 

 
/*End Footer*/

<!--Navbar--> 
 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand"><img src="http://i64.tinypic.com/27wy82r.png" id="logo-img"></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 pull-right"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--End Navbar--> 
 
<!--Jumbotron--> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="jumbotron" id="first" href="#home"> 
 
     <img class="jumbotron-image" src="http://netdna.webdesignerdepot.com/uploads/2014/07/featured36.jpg"> 
 
     <h1 class="text-center fadeInPage" id="h1first"> 
 
     Welcome to Cosmos<br> web design 
 
     </h1> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--End Jumbotron--> 
 
<!--About--> 
 
<div class="container" id="about-section"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <h2 class="text-center" id="abouth2"><a name="about">About</a></h2> 
 
     <p class="fadeInBlock" id="p-about">Cosmos Web Design was created by George Kech. I provide web solutions that require HTML, CSS, JavaScript and JQuery. I focus on serving the needs of each customer individually with complete satisfaction as my goal.</p> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <img src="https://www.topechelon.com/wp-content/uploads/2016/07/devices-web-design.png" alt="web design" class="img-responsive"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--End About--> 
 
<!--Portfolio--> 
 
<div class="container-inner" id="portfolio-section"> 
 
    <h2 class="text-center headline fadeInBlock" id="portfolio-id"><a name="portfolio">Portfolio</a> is coming soon...</h2> 
 
    <div class="container"> 
 
    <div class="row text-center"> 
 
     <div class="col-md-4"> 
 
     <img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg"> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg"> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--End Portfolio--> 
 
<!--Contact--> 
 
<div class="container-fluid"> 
 
    <div class="row" id="contact-section"> 
 
    <div class="col-md-12"> 
 
     <div class="text-center"> 
 
     <a href="https://www.facebook.com/georgefilmographia"><i class="social-icons fa fa-facebook-official" id="facebook"></i></a> 
 
     <a href="https://twitter.com/kech_george"><i class="social-icons fa fa-twitter" id="twitter"></i></a> 
 
     <a href="https://www.freecodecamp.com/georgemitnick"><i class="social-icons fa fa-free-code-camp" id="fcc"></i></a> 
 
     <a href="[email protected]"><i class="social-icons fa fa-envelope" id="email"></i></a> 
 
     <h3 id="contactMe"> 
 
      <a name="contact"></a> 
 
     </h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--End Contact--> 
 
<!--Footer--> 
 
<footer> 
 
    <p class="text-center" id="copy">George Kech &copy; 2017</p> 
 
</footer>

そして、ここではcodepenへのリンクです：Codepen

出典

2017-03-16 Nick Smith

あなたのブートストラップに起因します：すべて.rowは左右にマイナスのマージンを持ちますが、すべて.col-*には左右に同じ量のパディングがあります。

私たちはそれを取り除かなければなりません。しかし、我々は.containerクラスの中にそれを戻す必要があります。

はここを見て：https://codepen.io/anon/pen/QpOyyo

を私はこのCSSを追加しました：

/* Don't add padding to all elements that have classes like "col-md-*" */ 
[class^="col-md-"], 
[class*=" col-md-"] { 
    padding-right: 0; 
    padding-left: 0; 
} 
/* Add back the Bootstrap padding, if inside .container */ 
.container [class^="col-md-"], 
.container [class*=" col-md-"] { 
    padding-right: 15px; 
    padding-left: 15px; 
} 

/* Don't add negative margin for all rows */ 
.row { 
    margin-left: 0; 
    margin-right: 0; 
} 

/* Add back the Bootstrap margin, if inside .container */ 
.container .row { 
    margin-left: -15px; 
    margin-right: -15px; 
}

更新：フッターの問題に対処するために、同様にこれを追加します。

.container-fluid { 
    padding-right:0px; 
    padding-left:0px; 
} 

footer p{ 
    margin:0; 
}

出典

2017-03-16 15:35:21 HerrSerker

@Sicae編集をありがとう。私は底の問題を完全に覆している。しかし、私の意見では、Serg Chernataの答えは正しいものです。ブートストラップの方法にも言及していますが、私の答えはちょっとしたものです。 – HerrSerker

Serg Chernataのように.container-fluidを追加しようとしましたが、問題は解決しません。左右に余分なスペースができます。 –

溶液は.rowおよび.col-12を除去することであった。今はうまくいく。 –

そのdiv要素の.COL-MD-12にパディング右によって引き起こされます。 0に設定し、その罰金。下部の空白はフッターの#copyによって発生し、margin-bottom：0を追加します。

出典

2017-03-16 15:21:26 camiel

これは、navbarとjumbotronセクションの余分なスペースだけを解決します。 –

また、マージンボトムを追加：フッターに0を#copy、私は答えを編集 – camiel

私はあなたのトップレベルの入れ子だと思います。 jumbotronをコンテナdivにラップする必要があります。あなたが基本的なtemplates provided by boostrap's documentationを見れば、彼らは、コンテナのdivにすべてのボディのコンテンツを配置、

<div class="container-fluid"> 
    <div class="row"> 
    ... 
</div>

は、一般的に言って：あなたは全幅が必要な場合には、それが液体にすることができます。

これは、各行に-15pxのマージンがあるためです。

出典

2017-03-16 15:34:57

ジャンボトロンをdivコンテナ流体に入れると、下部の余分なスペースが修正されますが、ジャンボトロンの余分な左右のスペースができます。 –

私が言っているのは、入れ子に注意し、提供された例を見ているということです。あなたの現在のコードがどのようなものかわかりません。 –

ウェブサイトの右下に余分なスペースがあるのはなぜですか？

答えて

関連する問題