Boostrapの列内の要素をcolよりも広くするにはどうすればいいですか？

Question

私の英語は申し訳ありませんが、ブートストラップについて少し質問があります。

私は応答ウェブサイトを作るしようとしていると私はこのような4列と行を持って

：

DIV「seeMore」は、デフォルトでは隠されていると、boxToggle要素をクリックの上、それはでブロックを表示スライドトグル。これは完全に機能します。

私の問題は、div "seeMore"が（col-lg-12のように）100％の行に収まるようにすることです。

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>