Bootstrap - 更改堆棧上的列高度

Question

使用Bootstrap，我有一個行和3列div在我的HTML和我有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

使用媒體查詢專門爲引導的xs斷點< 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應該總是一個容器內使用。

Answer 2

聽起來像你想要使用媒體查詢。

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

這將改變的.col-sm-4高度每當視口寬度爲500像素<;

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

添加一個名爲.whatever新類（我用.mydivs）在你的CSS。您不希望將媒體查詢附加到引導程序定義的選擇器。改爲將高度值添加到「.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%; } 
    }