javascript - 如何使 Bootstrap 中 col 内的元素比 col 宽？

Question

抱歉我的英语不好，我有一个关于 Bootstrap 的小问题。

我正在尝试使网站具有响应能力，并且我有一行包含 4 列，如下所示:

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

我的问题是我希望 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

谢谢:)

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>