如何使Boostrap上col内的元素比col宽

How to make an element inside a col on Boostrap wider than the col?

本文关键字：col 元素 Boostrap 何使      更新时间：2024-06-19

对不起我的英语，我对Bootstrap有点问题。

我正试图让一个网站做出响应，我有一排4栏，如下所示：

div"seeMore"默认情况下是隐藏的，单击boxToggle元素时，它会显示带有slideToggle的块。这非常有效。

我的问题是，我希望div"seeMore"适合100%的行（就像col-lg-12）。

我试着把div"seeMore"放在col-lg-3之外，制作一个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

感谢：）

我希望我能正确理解你想要实现的目标。如果您希望.seeMorediv适合整个行宽，您可以将列类声明从外部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>
相关文章：