如何讓Boostrap上的一個元素內的元素比col更寬？

Question

對不起，我有一個關於Bootstrap的小問題。

我試圖做一個網站響應和我有4列這樣的一行：

股利「seeMore」默認是隱藏的，並且在點擊boxToggle元素，它顯示塊一個slideToggle。這工作完美。

我的問題是，我希望div「seeMore」適合100％的行（如col-lg-12）。

我試圖把col「lg-3」以外的div「seeMore」製作成col-lg-12，它在大屏幕上工作正常，但在平板電腦和手機上卻損壞了，因爲div不在他的祖先。

$(document).ready(function() { 
 
    $("#boxToggle").click(function() { 
 
    $(".seeMore").slideToggle("slow"); 
 
    }); 
 
});

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css); 
 

 
body { 
 
    font: arial sans-serif; 
 
} 
 

 
.wrapper { 
 
    width: 1280px; 
 
    margin: 0 auto; 
 
} 
 

 
.box { 
 
    background: pink; 
 
    color: #fff; 
 
    padding: 10px; 
 
} 
 

 
.box-body { 
 
    cursor: pointer; 
 
    height: 100px; 
 
} 
 

 
.seeMore { 
 
    display: none; 
 
    background: grey; 
 
    color: #fff; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 

 
<div class="col-lg-3 col-md-8 col-sm-6 col-xs-12"> 
 

 
    <div class="box box-int box-options"> 
 

 
    <div class="box-header"> 
 
     <h2>Title here</h2> 
 
    </div> 
 
        
 
    <div class="box-body" id="boxToggle"> 
 
     <div class="layout no-padding"> 
 
     <p>Some text here</p>    
 
     </div> 
 
    </div> 
 
        
 
    </div> 
 

 
    <div class="seeMore"> 
 
    <div class="txt"> 
 
     <h2>Some title here</h2> 
 
     <p>Blablabla</p> 
 
    </div>   
 
    </div> 
 

 
</div> 
 

 
    </div>

我做了一個codePen太多，如果你想看到：http://codepen.io/puzzleland/pen/BKrVJe

謝謝:)

Answer 1

我希望我理解你正在努力實現正確的。如果你想.seeMore div來適應整個行的寬度可以從外層div移動列類聲明內的div像這樣：

<div class="wrapper"> 

    <div class="row"> 

    <div> <!-- Delete the class from here and put the declaration inside .box and .seeMore --> 

     <div class="box box-int box-options col-lg-3 col-md-8 col-sm-6 col-xs-12"> 

     <div class="box-header"> 
      <h2>Title here</h2> 
     </div> 

     <div class="box-body" id="boxToggle"> 
      <div class="layout no-padding"> 
      <p>Some text here</p> 
      </div> 
     </div> 

     </div> 

     <div class="seeMore col-xs-12"> 
     <div class="txt"> 
      <h2>Some title here</h2> 
      <p>Blablabla</p> 
     </div> 
     </div> 

    </div> 

    </div> 

</div>