Question

我正在尝试制作两个全高 bootstrap 列，如下例所示：Twitter bootstrap 3 two columns full height 但问题是它在第二个内容（col-md-2）之后显示了第一列内容（col-md-10）。

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<style type="text/css">



html,body,.m-container
{
    height:100%;
}
.m-container
{
    display:table;
    width: 100%;
    margin-top: 50px;


    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.row
{
    height: 100%;
    display: table-row;
}
.col-md-2 .no-float, .col-md-10 .no-float {
    float: none; 
}
.col-md-2
{
    float: none;
    display: table-cell;
    background: pink;
}
.col-md-10
{
    display: table-cell;
    background: yellow;
    float: none;
}
</style>

</head>
<body>
<header>Header</header>
<div class="m-container">
    <div class="row">
<!--  Data sources accordion  -->
<div class="col-md-2">
 <div class="well">I'm another well</div>
</div><!-- /end of col -->
        <!-- 
        Wall of panels 

         -->
<div class="col-md-10">


  <div class="col-md-6">
 <div class="well">I'm the first well</div>

</div>
<div class="col-md-6">
 <div class="well">I'm the second well</div>

</div>
<div class="col-md-6">
 <div class="well">I'm the third well</div>

</div>
</div>
</body>
</html>

我正在尝试不使用col-md-6部分中的col-md-10并且它有效，但我应该使用col-md-6
有人知道为什么我有这个问题？在我的代码的JSFiddle链接之上 JSFIDDLE Code

Bootstrap柱全高

0 个答案: