Question

我试图使用bootstrap3创建一个响应式网站，它在大屏幕中是3列，在中间是2列：

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4" id="sidebar1"></div>
    <div class="col-lg-6 col-md-8" id="main"></div>
    <div class="col-lg-3 col-md-4" id="sidebar2"></div>
  </div>
</div>

http://www.bootply.com/yfJF1flD0V
但是这个代码不能正常工作，在中等大小，sidebar2进入一个新行，我希望sidebar2直接在sidebar1下面。我怎么能这样做？

Answer 1

您必须复制部分内容并使用hidden-lg和visible-lg。

DEMO ON BOOTPLY

<div class="container">
    <div class="row">

      <!-- on md only -->
      <div class="col-md-4 hidden-lg">
        <div class="row">
          <div class="col-md-12 grey1">
            Sidebar 1 md - Lorem ipsum dolor sit amet...
          </div>
          <div class="col-md-12 grey2">
            Sidebar 2 md - Lorem ipsum dolor sit amet...
          </div>
        </div>
      </div>

      <!-- on lg only -->
      <div class="col-lg-2 visible-lg">
        Sidebar 1 lg - Lorem ipsum dolor sit amet...
      </div>

      <div class="col-lg-2 col-lg-push-8 visible-lg">
        Sidebar 2 lg - Lorem ipsum dolor sit amet...
      </div>

      <!-- on all -->
        <div class="col-md-8 col-lg-pull-2">
          Main all - Lorem ipsum dolor sit amet...
    </div>

  </div>
</div>

由于要求在md屏幕上将侧边栏与主要内容叠加在一起，因此您必须将侧边栏放在包含列中。但是，包含列的内容会使您无法在lg个屏幕中围绕相同的主要内容触发侧边栏。因此需要使用可见和隐藏。我总觉得他们有点笨拙，但除此之外，我觉得你不会得到你想要的......

Answer 2

我是用jQuery做的。

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4" id="sidebar1"></div>
    <div class="col-lg-6 col-md-8" id="main"></div>
    <div class="col-lg-3 col-md-4" id="sidebar2"></div>
  </div>
</div>

和jQuery：

function mediumResponsive() {
// Reset everything
  $( '#main>div' ).removeClass('col-md-8');
  $("#sidebar1").next().andSelf().unwrap();
  $( "#sidebar2" ).insertAfter( $( "#main" ) );
  if ($('#is-md').is(":visible")) {
// Do medium responsive
  $( "#sidebar2" ).insertAfter( $( "#sidbar1" ) );
  $("#sidebar1").next().andSelf().wrapAll('<div class="col-md-4"><div class="container-fluid"');
  $( '#main>div' ).addClass('col-md-8');
  };
};
$(document).ready(mediumResponsive);
$(window).bind( "resize", mediumResponsive );

它有效。请告诉我你的意见。

Bootstrap3 3列布局为2列

2 个答案: