Question

我正在尝试建立一个自适应网站，这是我在布局上看到的布局 desktop version。使用intended mobile version like so.

因为我试图让列在浏览器中填充100％的高度，所以我更改了一些引导代码。如果我的css是

，我的代码中是否应该更改任何内容

    html,body,.container{
        height:100%;
    }

    .container{
        display:table;
        width: 100%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid black;
        padding: 0 0 0 0;
        margin: 0 0 0 0;    
    }
    .row
    {
        height: 100%;
        display: table-row;
    }
    .col-xs-6.no-float{
        display: table-cell;
        width: 50%;
        padding: 0 0 0 0;
        float: none;
    }

Answer 1

这是错误的想法，不应该改变引导类。用自定义类编写自定义css。

    <div class="container full-height-container">
  <div class="row full-height-row">
    <div class="col-md-6 col-xs-12  left full-height-col">
      <div class="row">
        <div class="col-md-4">
          c1
        </div>
         <div class="col-md-4">
          c2
        </div>
         <div class="col-md-4">
          c3
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xs-12 right full-height-col">
      test2
    </div>
  </div>
</div>


html,body{
  height: 100%;
}

.left{
  background: red;
}

.right{
  background: yellow;
}

.full-height-container{
  height: 100%;
}

.full-height-row{
  height: 100%;
}

.full-height-col{
  height: 100%;
}

看看：fiddle

Answer 2

您是否尝试使用媒体屏幕？这样你可以在不同的分辨率上设置不同的大小。例如：

@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

这意味着如果分辨率为480或更低，那么将应用给定的示例。此外，如果您不想将这些媒体屏幕放在一个CSS中，您可以在头部区域设置它们：

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

Bootstrap - 具有100％高度的响应行和列

2 个答案: