自舉移動版本中的div重疊問題

我有一個傳送帶和2個引導程序中的行。在標準視圖中佈局很好，但當它進入移動查詢時，頁面佈局會變得混亂。第二排似乎重疊在藍色的列，我不知道爲什麼。自舉移動版本中的div重疊問題

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" > 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <div > 

      </div> 
     </div> 
    </div> 
</div> 

<div class="container-fluid box"> 
    <div class="row" id="triple"> 
    <div class="col-lg-4 one"> 
     <p>123</p> 
    </div> 
    <div class="col-lg-4 two"> 
     <p>456</p> 
    </div> 
    <div class="col-lg-4 three"> 
     <p>789</p> 
    </div> 
    </div> 

    <div class="row" id="single"> 
    <div class="col-lg-4 four"> 
    </div> 
    <div class="col-lg-4 four"> 
    </div> 
    <div class="col-lg-4 four"> 
    </div> 
</div>

來源

2016-02-13 123123

你'#triple {身高：100％;}'這是造成問題。你可以用'media'查詢來提高每個col的高度。 – DebRaj

我將如何製作列堆棧然後用媒體查詢？ – 123123

希望這是您正在尋找的解決方案https://jsfiddle.net/vsk59tck/1/ – DebRaj

你應該先針對移動設備，如果你想移動的響應

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" > 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <div > 

       </div> 
      </div> 
     </div> 
    </div> 

    <div class="container-fluid box"> 
     <div class="row" id="triple"> 
     <div class="col-xs-4 one"> 
      <p>123</p> 
     </div> 
     <div class="col-xs-4 two"> 
      <p>456</p> 
     </div> 
     <div class="col-xs-4 three"> 
      <p>789</p> 
     </div> 
     </div> 

     <div class="row" id="single"> 
     <div class="col-xs-4 four"> 
     </div> 
     <div class="col-xs-4 four"> 
     </div> 
     <div class="col-xs-4 four"> 
     </div> 
    </div>

根據您的檢查更新此fiddle

來源

2016-02-13 08:17:57 WitVault

@ 123123它解決了你的問題嗎？ – WitVault

是的，它修復了它，但如果我這樣做，整個佈局變得流暢，並不像它應該崩潰。我必須使用單獨的課程嗎？對不起，我是bootstrap的新手。 – 123123

是的，針對移動我認爲使截點的方式更小，但當它最終將崩潰的問題仍然如我所述。橙色的行似乎與藍色的行重疊，並不像它應該在底部。 – 123123

這是你的解決辦法：

HTML：

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" > 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <div > 

       </div> 
      </div> 
     </div> 
</div> 
<div class="container-fluid box"> 
    <div class="row" id="triple"> 
    <div class="col-lg-4 one"> 
     <p>123</p> 
    </div> 
    <div class="col-lg-4 two"> 
     <p>456</p> 
    </div> 
    <div class="col-lg-4 three"> 
     <p>789</p> 
    </div> 
</div> 
<div class="row" id="single"> 
    <div class="col-lg-4 four"> 
</div> 
<div class="col-lg-4 four"> 
    </div> 
<div class="col-lg-4 four"> 
    </div> 
</div>

CSS：

html, body{ 
    height: 100%; 
    } 
    .carousel, .item, .active, .carousel-inner{ 
    height: 100%; 
    } 

    .item>div{ 
    width: 100%; 
    height: 100%; 
    } 

    .item:nth-child(1) > div { 
    background-color: yellow; 
    } 

    .box{ 
    width: 100%; 
    height: 100%; 
    position:absolute; 
    top:100%; 
    } 
    #triple{ 
    height: auto; 
    } 

    .col-lg-4 { 
    height:100%; 
    } 
    .one, .two, .three{height: 50vh;} 
    .one{ background-color:red;} 
    .two{ background-color:blue;} 
    .three{ background-color:green;} 
    .four{ background-color:orange;} 

    #single{ 
    height:50%; 
    border:1px solid black; 
    } 
    @media (max-width: 767px){ 
    .one, .two, .three{height: 100vh;} 
    }

小提琴：https://jsfiddle.net/vsk59tck/1/

來源

2016-02-16 06:31:50 DebRaj

自舉移動版本中的div重疊問題

回答

相關問題