Bootstrap网格/列响应问题

Question

我计划创建一个这样的列： 当dekstop始终显示至少一个内容时，

1 2 3
内容1

当Mobile始终隐藏内容时：

1
2
3

点击例如＃2

1
2
内容2
3

可以查看visual Sample here。

我尝试用jQuery进行隐藏和显示，但是它看起来并不平滑，当在移动屏幕上放大到桌面视图时它有问题：（

这是我的CodePen

function resize() {
  if ($(window).width() < 992) {
    $('.blue').removeClass('active');
    $(".features.purple, .features.blue, .features.grey").removeClass('active');
    $(".blue-cover").hide();
    $(".pruple-cover").hide();
    $(".grey-cover").hide();

  } else {
    $(".features.purple, .features.blue, .features.grey").removeClass('active');
  }
}

$(document).ready(function() {
  $(window).resize(resize);
  resize();
});


$(".dekstop-grey").click(function() {
  $(".grey-cover").show();
  $(".greyarr").show();
  $(".blue-cover, .purple-cover, .bluearr, .purplearr").hide();
  $(".features.grey").addClass('active');
  $(".features.purple, .features.blue").removeClass('active');
});

$(".dekstop-blue").click(function() {
  $(".blue-cover").show();
  $(".bluearr").show();
  $(".grey-cover, .purple-cover, .greyarr .purplearr").hide();
  $(".features.blue").addClass('active');
  $(".features.purple, .features.grey").removeClass('active');
});


$(".dekstop-purple").click(function() {
  $(".purple-cover").show();
  $(".purplearr").show();
  $(".grey-cover, .blue-cover, .greyarr, .bluearr").hide();
  $(".features.purple").addClass('active');
  $(".features.blue, .features.grey").removeClass('active');
});

$(".fblue").click(function() {
  $(".blue-cover, .bluearr").show();
  $(".grey-cover, .purple-cover, .greyarr .purplearr").hide();
  $(".features.blue").addClass('active');
  $(".features.purple, .features.grey").removeClass('active');
});

$(".fpurple").click(function() {
  $(".purple-cover, .purplearrs").show();
  $(".grey-cover, .blue-cover, .greyarr, .bluearr").hide();
  $(".features.purple").addClass('active');
  $(".features.grey, .features.blue").removeClass('active');
});

$(".fgrey").click(function() {
  $(".grey-cover, .greyarr").show();
  $(".blue-cover, .purple-cover, .bluearr, .purplearr").hide();
  $(".features.grey").addClass('active');
  $(".features.purple, .features.blue").removeClass('active');
});

.three-feature {
  margin-bottom: 30px;
}

.three-feature .arrowup {
  display: none;
}

.three-feature .blue-cover {
  background: blue;
  padding: 40px;
  color: #fff;
}

.three-feature .purple-cover {
  background: purple;
  padding: 40px;
  color: #fff;
}

.three-feature .grey-cover {
  background: grey;
  padding: 40px;
  color: #fff;
}

@media (max-width: 992px) {
  .three-feature .arrowup {
    display: none !important;
  }
}

.three-feature .active .arrowup {
  display: inline-block;
}

.three-feature .features {
  -webkit-box-shadow: 3px 3px 15px -3px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 3px 3px 15px -3px rgba(0, 0, 0, 0.45);
  box-shadow: 3px 3px 15px -3px rgba(0, 0, 0, 0.45);
  background: #fff;
  padding: 10px;
  border: 3px solid transparent;
  cursor: pointer;
}

@media (max-width: 992px) {
  .three-feature .features {
    margin-top: 15px;
    margin-bottom: 15px;
    max-width: 320px;
  }
}

.three-feature .features.active.blue,
.three-feature .features:hover.blue {
  border-color: blue;
}

.three-feature .features.active.purple,
.three-feature .features:hover.purple {
  border-color: purple;
}

.three-feature .features.active.grey,
.three-feature .features:hover.grey {
  border-color: grey;
}

.three-feature .features.active .feature-inner.blue,
.three-feature .features:hover .feature-inner.blue {
  border-color: blue;
}

.three-feature .features.active .feature-inner.purple,
.three-feature .features:hover .feature-inner.purple {
  border-color: purple;
}

.three-feature .features.active .feature-inner.grey,
.three-feature .features:hover .feature-inner.grey {
  border-color: grey;
}

.three-feature .features .feature-inner {
  border: 3px dashed transparent;
  padding: 20px 30px;
}

.three-feature .features .feature-inner p {
  min-height: 72px;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  margin: 15px 0;
  /* Extra Small */
}

@media (max-width: 767px) {
  .three-feature .features .feature-inner p {
    min-height: auto;
  }
}

.three-feature .features .feature-inner .icon {
  width: 100%;
  max-width: 220px;
}

.three-feature .features .feature-inner .logo {
  width: 100%;
  max-width: 153px;
}

.three-feature .colmn {
  /* Extra Small */
}

@media (max-width: 767px) {
  .three-feature .colmn {
    padding: 0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="cwrcover">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="three-feature">
          <div class="col-md-4 col-sm-12 dekstop-blue active colmn text-center hidden-xs hidden-sm">
            <div class="features active blue center-block">
              <div class="feature-inner blue">
                <h1>Dekstop 01</h1>
              </div>
            </div>
            <img src="http://www.iconsdb.com/icons/preview/blue/triangle-xxl.png" class="bluearr arrowup" style="max-width: 35px;" alt="">
          </div>
          <!--1-->
          <div class="col-md-4 col-sm-12 dekstop-purple colmn text-center hidden-xs hidden-sm">
            <div class="features purple center-block">
              <div class="feature-inner purple">
                <h1>Dekstop 02</h1>
              </div>
            </div>
            <img src="http://www.iconsdb.com/icons/preview/purple/triangle-xxl.png" class="purplearr arrowup" style="max-width: 35px;" alt="">
          </div>
          <!--2-->
          <div class="col-md-4 col-sm-12 dekstop-grey colmn text-center hidden-xs hidden-sm">
            <div class="features grey center-block">
              <div class="feature-inner grey">
                <h1>Dekstop 03</h1>
              </div>
            </div>
            <img src="http://www.iconsdb.com/icons/preview/gray/triangle-xxl.png" class="greyarr arrowup" style="max-width: 35px;" alt="">
          </div>
          <!--3-->
          <div class="col-md-4 col-sm-12 fblue colmn text-center hidden-lg hidden-md">
            <div class="features active blue center-block">
              <div class="feature-inner blue">
                <h1>MOBILE 01</h1>
              </div>
            </div>
          </div>
          <div class="col-xs-12 blue-cover">
            <img src="http://www.iconsdb.com/icons/preview/blue/triangle-xxl.png" class="bluearrow center-block hidden-lg hidden-md" alt="">
            <div id="featurevid" class="center-block blue">
              <div class="benefits">
                BLUE 01 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>

            </div>
          </div>
          <div class="col-md-4 col-sm-12 col-xs-12 colmn fpurple text-center hidden-lg hidden-md">
            <div class="features pink center-block">
              <div class="feature-inner purple">
                <h1>MOBILE 02</h1>
              </div>
            </div>
          </div>
          <!--2-->
          <div class="col-xs-12 purple-cover" style="display: none;">
            <img src="http://www.iconsdb.com/icons/preview/purple/triangle-xxl.png" class="purplearrow center-block hidden-lg hidden-md" alt="">
            <div id="featurevid" class="center-block purple">
              <div class="benefits">
                purple 01 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>
            </div>
          </div>
          <!--Purple cover Dekstop-->
          <div class="col-md-4 col-sm-12 col-xs-12 colmn fgrey text-center hidden-lg hidden-md">
            <div class="features yellow center-block">
              <div class="feature-inner grey">
                <h1>MOBILE 03</h1>
              </div>
            </div>
          </div>
          <!--3-->
          <div class="col-xs-12 grey-cover" style="display: none;">
            <img src="http://www.iconsdb.com/icons/preview/grey/triangle-xxl.png" class="greyarrow center-block hidden-lg hidden-md" alt="">
            <div id="featurevid" class="center-block grey">
              <div class="benefits">
                GREY 01 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>
            </div>
          </div>
          <!--Grey Dekstop-->
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

你的问题在于

$(document).ready( function() {
    $(window).resize(resize);
    resize();
});

您无法在resize()上致电document.ready，因为您的调整大小方法正在检查window width是否小于992＆amp;隐藏.blue-cover。

请从resize删除document.ready方法，它应该是

$(document).ready( function() {
  $(window).resize(resize);
});

只有在resize时才会调用

resize your browser方法。

希望这会对你有所帮助。