ブートストラップ行の整列の問題

イメージは、1つの行に2つのイメージがあり、下の行に2つのイメージがあるように、整列する必要があります。しかし、すべての画像はお互いの上に積み重なります。ナビゲーションバーが別のコンテナにある場合でも、ナビゲーションバーが削除されたときに問題がなくなるので、これはナビゲーションバーと関係があることがわかります。 JSFiddle link ブートストラップ行の整列の問題

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-6 col-sm-12"> 
       <img src="http://media.istockphoto.com/photos/frog-picture-id175397603?k=6&m=175397603&s=170667a&w=0&h=niKhE-PmYumUHrQa4akcU2cRcmmJMx9_dtWYAcDtJBw=" alt="Smiley face" height="42" width="42"> 
      </div> 
      <div class="col-md-6 offset-md-6 col-sm-12"> 
       <img src="http://media.istockphoto.com/photos/frog-picture-id175397603?k=6&m=175397603&s=170667a&w=0&h=niKhE-PmYumUHrQa4akcU2cRcmmJMx9_dtWYAcDtJBw=" alt="Smiley face" height="42" width="42"> 
      </div> 
      <div class="col-md-6 col-sm-12"> 
       <img src="http://media.istockphoto.com/photos/frog-picture-id175397603?k=6&m=175397603&s=170667a&w=0&h=niKhE-PmYumUHrQa4akcU2cRcmmJMx9_dtWYAcDtJBw=" alt="Smiley face" height="42" width="42"> 
      </div> 
     </div> 
    </div>

はまた、あなたが拡張したり、結果のパネルでは、画像を見ることができ、それらを幅縮小場合、私は、ナビゲーションバーの下の画像の位置合わせに問題があることに注意してください。この問題が関連しているかどうかはわかりません。

出典

2017-02-13 5un5h1n3

のスタートは、あなたは完全なコードを投稿することができます。 – neophyte

あなたのCSSを読んで、ナビの直後にdiv内にクラスmainを追加するのを忘れたと思います。

JsFiddle：https://jsfiddle.net/hbm23ras/

HTML

<body> 
    <nav class="navbar navbar-inverse sidebar" role="navigation"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> 
        <span class="sr-only">Toggle</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Brand</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li><a href="">blah<i class="pull-right hidden-xs showopacity" aria-hidden="true" style="font-size:20px;"></i></a></li> 
        <li class="active"><a href="statistics.html">efefefef<i class="pull-right hidden-xs showopacity" aria-hidden="true" style="font-size:20px;"></i></a></li> 
        <li ><a href="">blah<i class="pull-right hidden-xs showopacity" aria-hidden="true" style="font-size:20px;"></i></a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
    <div class="container-fluid main"> // <------- HERE

出典

2017-02-13 17:43:38 pbenard

ブートストラップ行の整列の問題

答えて

関連する問題