Question

我想在将屏幕大小调整为number（宽度为1024px）时更改其中一列md。

这样的事情：

[.col-md-2][.col-md-8][.col-md-2]变为[hidden][.col-md-12][hidden]

我目前的代码：

  <div class="col-md-2 hidden-md"></div>
  <div class="col-md-8"></div>
  <div class="col-md-2 hidden-md"></div>

如何在调整大小时将<div class="col-md-8"></div>更改为<div class="col-md-12"></div>？

Answer 1

尝试以下代码。这将扩大小屏幕设备的中间栏。

<div class="col-md-2 hidden-sm"></div>
<div class="col-md-8 col-sm-12"></div>
<div class="col-md-2 hidden-sm"></div>

但要确保您的引导程序必须自定义且@screen-sm必须从1024开始

如果没有，则需要使用媒体查询添加1024分辨率的自定义css

col-md-8 { 
    width: 100%;
}
col-md-2 {
    display: none;
}

Answer 2

请尝试以下操作： Updated Demo

 <div class="col-lg-2 hidden-md"></div>
 <div class="col-sm-12"></div>
 <div class="col-lg-2 hidden-md"></div>

Reference 1 reference 2

Answer 3

尝试使用@media，如下所示：

@media screen and (min-width:1024px){
  .hidden-md{
     display:none;
}
    }

希望这有帮助。

Answer 4

我在一段时间后找到了答案，它非常简单，并且不需要任何自定义@media css或任何自定义css代码。她的html：

<div class="col-xs-0 col-sm-0 col-md-0 col-lg-2"></div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8"></div> <div class="col-xs-0 col-sm-0 col-md-0 col-lg-2"></div>

第1列和第3列变为“不可见”＆＃39; on＆＃39; md＆＃39;尺寸和第2列成为完整尺寸（12）

如何在调整屏幕大小时更改引导列？

4 个答案: