Question

对不起我的英文，我对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>

如果您想查看：http://codepen.io/puzzleland/pen/BKrVJe

，我也制作了一个codePen

谢谢：）

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>

如何在Boostrap上的col中创建一个比col更宽的元素？

1 个答案: