2017-12-26 21 views
0

私は私の最初のブートストラップのフロントエンドを作成しています、と私は私が解決することができないんだけど、いくつかの問題を経験しています:ブートストラップコンテナ、グリッドの行は幅とパディング問題

row

行を拡大しますコンテナの幅全体に、最大collum幅(12単位)がこの幅に拡張しません。さらに上の

column

、なぜパディングを超えるコンテナの書き込みの中にある:

padding

ヒントありがとうございます!

私はすでにcontainer-fluidクラスを使用しようとしましたが、その行は最大幅を持たないようです。

全体のHTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Snoo</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 

    <link rel="stylesheet" type="text/css" href="app.css"> 

</head> 
<body> 
    <div class="container"> 
     <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
      <a class="navbar-brand" href="#">Snoo!</a> 
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
       <span class="navbar-toggler-icon"></span> 
      </button> 

      <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
       <ul class="navbar-nav mr-auto"> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">About</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Reddit!</a> 
        </li> 
       </ul> 
      </div> 
     </nav> 
    </div> 

    <div class="container"> 
     <div class="row">   
      <div class="col_xl-12">  
       <div id="content">  
        <h1>Snoo!</h1> 
        <hr> 
        <h3>A chatbot based on a million reddit comments, quiet salty!</h3> 
        <button class="btn btn-primary btn-lg">Learn more!</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 

</html> 

CSS:

#content { 
    text-align: center; 
    padding-top: 25% 
} 
+0

col_xs-12は、COL-XS-12 –

答えて

1

あなたのクラス名が間違っcol_xl-12col-xl-12

enter image description here

https://v4-alpha.getbootstrap.com/layout/grid/

クラス名を変更するには
+0

のおかげでなければなりません私は明らかにそれを手で入力しました。もう30分節約してくれてありがとう:) –

0

私はタイプミスを見ている、変更しよう:

col_xl-12へ - >col-xl-12

-1

あなたはそれをチェックして、このコードを使用COL-XL-12にエラーを入力しています。 あなたのコーディングからコンテナを削除

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xl-12"> 
     </div> 
    </div> 
</div> 
+0

何度も同じ回答を投稿するのは何ですか? –

-1
  1. を使用することができます。その後の行は、あなたのクラスはcol-*-*あるべき
  2. 全幅を持つことになりますが、あなたは、HTMLの構造がなるcol_xl-12

使用:

<div class="row"> 
    <div class="/* Container or Container-fluid or Col-* */"> 
    </div> 
</div> 
+0

これは間違っています。コンテナは使用されません。行と行は常にコンテナの中に入るべきです。そのような回答を投稿する前にドキュメントを読んでください。 –

+0

@TemaniAfifドキュメントのコンテナは常に行の親でなければなりません。これについて何か間違っているわけではありません。私は明確なアイデアを得ることができるように説明したり、ドキュメントのリンクを提供してください! –

+0

https://v4-alpha.getbootstrap.com/layout/grid/ –

関連する問題