ブートストラップ：コンテナが列よりも小さく、オーバーフローが発生する

コンテナにバックグラウンドイメージが添付されていますが、列の半分のようにしか表示されず、列がオーバーフローし、bgイメージが停止します。私は2列がコンテナ内にあり、列が地球上でコンテナが列ブートストラップ：コンテナが列よりも小さく、オーバーフローが発生する

HTMLと成長していない理由を私は理解していない複数の行が含まれている分、高さを試してみました：

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"> 
 
    <link rel="stylesheet" href="style.css" type="text/css"> </head> 
 

 
<body> 
 
    <div class="bg-primary text-center d-flex align-items-center h-50" style="background-image: url(&quot;projektberge.png&quot;);"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-12"> 
 
      <h1 class="display-1 text-white">COVER</h1> 
 
      <p class="lead text-white">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p> 
 
      <a href="#" class="btn btn-lg btn-secondary">Button</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <nav class="navbar navbar-expand-md navbar-light bg-faded text-center"> 
 
    <div class="container"> 
 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> 
 
     <div class="collapse navbar-collapse text-center justify-content-center" id="navbar2SupportedContent"> 
 
     <ul class="navbar-nav"> 
 
      <li class="nav-item active"> 
 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">Features</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">Pricing</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">About</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
    <div class="attached" style="background-image: url(&quot;FB-1_Christopher Gusenbauer_PanoramaBahnhof.jpg&quot;);"> 
 
    <div class="h-100"> 
 
     <div class="container-fluid w-100"> 
 
     <div class="row h-100"> 
 
      <div class="col-md-8"> 
 
      <div class="row" style="height:100%"> 
 
       <div class="col-md-2 h-100 bg-primary" style="height:100%"> 
 
       <h1 class="">Summary</h1> 
 
       </div> 
 
       <div class="col-md-10 h-100"> 
 
       <div class="row "> 
 
        <div class="jumbotron jumbotron-fluid w-100"> 
 
        <div class="container"> 
 
         <h1 class="display-3">Jumbotron</h1> 
 
         <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       <div class="container"> 
 
        <div class="row"> 
 
        <div class="col-md-12"></div> 
 
        </div> 
 
        <div class="row bg-primary"> 
 
        <div class="col-md-6 bg-secondary"> 
 
         <img class="img-fluid d-block py-3" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg"> </div> 
 
        <div class="col-md-6 py-3"> 
 
         <h1 class="">Heading</h1> 
 
         <p class="">Paragraph</p> 
 
        </div> 
 
        </div> 
 
        <div class="row"> 
 
        <div class="col-md-12 bg-primary"></div> 
 
        </div> 
 
        <div class="row"> 
 
        <div class="col-md-12 bg-primary"> 
 
         <div class="container"> 
 
         <header class="page-header"> 
 
          <h1>Dark Responsive Timeline with Bootstrap</h1> 
 
         </header> 
 
         <ul class="timeline"> 
 
          <li> 
 
          <div class="tldate">Apr 2014</div> 
 
          </li> 
 
          <li> 
 
          <div class="tl-circ"></div> 
 
          <div class="timeline-panel"> 
 
           <div class="tl-heading"> 
 
           <h4>Surprising Headline Right Here</h4> 
 
           <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3 hours ago</small></p> 
 
           </div> 
 
           <div class="tl-body"> 
 
           <p>Lorem Ipsum and such.</p> 
 
           </div> 
 
          </div> 
 
          </li> 
 
          <li class="timeline-inverted"> 
 
          <div class="tl-circ"></div> 
 
          <div class="timeline-panel"> 
 
           <div class="tl-heading"> 
 
           <h4>Breaking into Spring!</h4> 
 
           <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 4/07/2014</small></p> 
 
           </div> 
 
           <div class="tl-body"> 
 
           <p>Hope the weather gets a bit nicer...</p> 
 
           <p>Y'know, with more sunlight.</p> 
 
           </div> 
 
          </div> 
 
          </li> 
 
          <li> 
 
          <div class="tldate">Mar 2014</div> 
 
          </li> 
 
          <li> 
 
          <div class="tl-circ"></div> 
 
          <div class="timeline-panel"> 
 
           <div class="tl-heading"> 
 
           <h4>New Apple Device Release Date</h4> 
 
           <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/22/2014</small></p> 
 
           </div> 
 
           <div class="tl-body"> 
 
           <p>In memory of Steve Jobs.</p> 
 
           </div> 
 
          </div> 
 
          </li> 
 
          <li class="timeline-inverted"> 
 
          <div class="timeline-panel"> 
 
           <div class="tl-heading"> 
 
           <h4>No icon here</h4> 
 
           <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/16/2014</small></p> 
 
           </div> 
 
           <div class="tl-body"> 
 
           <p>Here you'll find some beautiful photography for your viewing pleasure, courtesy of 
 
            <a href="http://lorempixel.com/">lorempixel</a>.</p> 
 
           <p> 
 
            <img src="http://lorempixel.com/600/300/nightlife/" alt="lorem pixel"> </p> 
 
           </div> 
 
          </div> 
 
          </li> 
 
          <li> 
 
          <div class="tl-circ"></div> 
 
          <div class="timeline-panel"> 
 
           <div class="tl-heading"> 
 
           <h4>Some Important Date!</h4> 
 
           <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/03/2014</small></p> 
 
           </div> 
 
           <div class="tl-body"> 
 
           <p>Write up a quick summary of the event.</p> 
 
           </div> 
 
          </div> 
 
          </li> 
 
          <li> 
 
          <div class="timeline-panel noarrow"> 
 
           <div class="tl-heading"> 
 
           <h4>Secondary Timeline Box</h4> 
 
           <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/01/2014</small></p> 
 
           </div> 
 
           <div class="tl-body"> 
 
           <p>This might be a follow-up post with related info. Maybe we include some extra links, tweets, user comments, photos, etc.</p> 
 
           </div> 
 
          </div> 
 
          </li> 
 
          <li> 
 
          <div class="tldate">Feb 2014</div> 
 
          </li> 
 
          <li class="timeline-inverted"> 
 
          <div class="tl-circ"></div> 
 
          <div class="timeline-panel"> 
 
           <div class="tl-heading"> 
 
           <h4>The Winter Months</h4> 
 
           <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/23/2014</small></p> 
 
           </div> 
 
           <div class="tl-body"> 
 
           <p>Gee time really flies when you're having fun.</p> 
 
           </div> 
 
          </div> 
 
          </li> 
 
          <li> 
 
          <div class="tl-circ"></div> 
 
          <div class="timeline-panel"> 
 
           <div class="tl-heading"> 
 
           <h4>Yeah we're pretty much done here</h4> 
 
           <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/11/2014</small></p> 
 
           </div> 
 
           <div class="tl-body"> 
 
           <p>Wasn't this fun though?</p> 
 
           </div> 
 
          </div> 
 
          </li> 
 
         </ul> 
 
         </div> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="col-md-12"></div> 
 
        </div> 
 
        </div> 
 
        <div class="row"> </div> 
 
        <div class="row"> </div> 
 
        <div class="row"> </div> 
 
        <div class="row"> </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
    <script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script> 
 
    </div> 
 
</body> 
 

 
</html>

CSS：

出典

2017-07-14 Christopher Gusenbauer

これは、ブートストラップ4アルファ6

にバグです10

開発中のBoostrap 4 beta 1で修正されました。 Pingendoを使用していることにお気づきでしょうか、あなたのSassファイルの最後にインポートを変更するBootstrap 4 Beta 1のバージョンを使用できます。

@import 'bootstrap-4.0.0-alpha.6';

出典

2017-07-14 14:24:39

ブートストラップ：コンテナが列よりも小さく、オーバーフローが発生する

答えて

関連する問題