Question

使用Bootstrap，我的html中有一行和3列div，我有css设置为列的高度为100％。

HTML：

<div class="row">
    <div id="one" class="col-sm-4">one</div>
    <div id="two" class="col-sm-4">two</div>
    <div id= "three" class="col-sm-4">three</div>
</div>

CSS：

html,body,{
    height:100%;
}
.col-sm-4{
    border: 1px solid black;
    height: 100%;
} 
#one{
    background-color: red;
}
#two{
    background-color: blue;
}
#three{
    background-color: green;
}

当屏幕变得足够小并且列堆叠时，我希望基本上将列的高度从100％更改为33.3333％，这样它们就不会超过身体的高度。然后当屏幕变大并且列重叠时，我想将它们的高度改回100％。我该怎么做？

Answer 1

在你的css中添加一个名为.whatever（我使用.mydivs）的新类。您不希望将媒体查询附加到引导定义的选择器。将高度值添加到“.mydivs”类中。

如果您将值附加到引导程序类，如果您稍后在页面上再次使用它，那么它也会在您最终使用它的任何地方进行更改。

  1.) Add
    <div class="row">
      <div id="one" class="mydivs col-sm-4 col-xs-12">one</div>
      <div id="two" class="mydivs col-sm-4 col-xs-12">two</div>
      <div id="three" class="mydivs col-sm-4 col-xs-12">three</div>
    </div>

 2.)   Then Use Breakpoints


    @media (max-width: 543px) {
    .mydivs { 
    height: 33.3%;
    }
    }

     @media (min-width: 544px) {  
    .mydivs{ height: 100%; }
    }

Answer 2

听起来您想要使用媒体查询。

@media(max-width: 500px) {
      .col-sm-4 {
        height: 33px;
      }
    }

每当视口宽度<1时，这将改变.col-sm-4的高度。 500px的;

html,
body,
{
  height: 100%;
}
.col-sm-4 {
  border: 1px solid black;
  height: 100px;
}
#one {
  background-color: red;
}
#two {
  background-color: blue;
}
#three {
  background-color: green;
}
@media(max-width: 500px) {
  .col-sm-4 {
    height: 33px;
  }
}

<div class="row">
  <div id="one" class="col-sm-4">one</div>
  <div id="two" class="col-sm-4">two</div>
  <div id="three" class="col-sm-4">three</div>
</div>

（请注意，这里很难看到，因为这个网站有一个固定的最小宽度）

Answer 3

使用媒体查询专门用于Bootstrap的xs断点＆lt; 768px ..

html, body, .container-fluid, .row {
    height:100%;
}
.col-sm-4 {
    border: 1px solid black;
    min-height: 100vh;
} 
#one{
    background-color: red;
}
#two{
    background-color: blue;
}
#three{
    background-color: green;
}
@media (max-width: 767px) {
    .col-sm-4 {
        min-height: 33.3333333%;
        height: 33.3333333%;
    } 
}

http://www.bootply.com/uXe60OvI4I

另外，请记住.row应始终在容器内使用。

Bootstrap - 更改堆栈上的列高度

3 个答案: