Bootstrap3 3 列布局到 2 列 [英] Bootstrap3 3-column layout to 2-column

问题描述

我正在尝试使用 bootstrap3 制作一个响应式网站，该网站在大屏幕中为 3 列，在中等屏幕中为 2 列:

<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>

http://www.bootply.com/yfJF1flD0V
但是此代码无法正常工作且大小适中，sidebar2 进入新行，我希望 sidebar2 直接位于 sidebar1 下方.我该怎么做?

解决方案

我使用 jQuery.

<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>

和 jQuery:

function mediumResponsive() {//重置一切$('#main>div').removeClass('col-md-8');$("#sidebar1").next().andSelf().unwrap();$( "#sidebar2" ).insertAfter( $( "#main" ) );if ($('#is-md').is(":visible")) {//做中等响应$( "#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 );

它的工作原理.请告诉我您的意见.

I,m trying to make a responsive website using bootstrap3 that is 3-column in large screens and 2-column in medium:

<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
but this code not working properly and on medium size, sidebar2 goes in a new row and i want sidebar2 goes below sidebar1 directly. how can i do that?

解决方案

I do it with 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>

and 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 );

and it works. Please tell me your comments.

这篇关于Bootstrap3 3 列布局到 2 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！