Question

所以我对网格系统有点问题。我想制作像麦当劳网站一样的网格。

因此，如果我缩小此网站，网格不会改变！我的意思是高度和宽度是一样的，只是内容在变化。我不知道该怎么做。请求帮助

我的例子：

＆＃13;

<div class="row">
  <div class="col-md-6"></div>
  <div class="col-md-6"></div>
</div>

＆＃13;

Answer 1

我不确定这是否正是您所寻找的，但我试了一下

运行下面的剪辑，激活＆＃34;整页＆＃34;并放大和缩小：

＆＃13;

html, body {
  height: 100%;
}

.cover-img {
  color: gray;
  font-weight: bold;
  width: 100%;
  height: 100%;
  background: url("https://s-media-cache-ak0.pinimg.com/originals/82/64/7e/82647eca04687361c6d515f335d4c08a.jpg") no-repeat center center fixed;
  background-size: cover;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="cover-img">
  <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
    </div>
  </div>
</nav>
<nav class="navbar navbar-default navbar-fixed-bottom navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <p>Some content here</p>
    </div>
  </div>
</nav>
  </div>

＆＃13;

希望有所帮助

Answer 2

这是另一种尝试。您可以在CSS中使用vieport hight和width（即height: 50vh）：

这不是一个完美的例子：

html, body {
  height: 100%;
}

.cover-img {
  color: gray;
  font-weight: bold;
  width: 100%;
  height: 100%;
  background: url("https://s-media-cache-ak0.pinimg.com/originals/82/64/7e/82647eca04687361c6d515f335d4c08a.jpg") no-repeat center center fixed;
  background-size: cover;
}

.some-box {
  display: flex;
  margin-top: 75px;
  height: 50vh;
  line-height: 10vh;
  font-size: 6vh;
  background: rgba(255,255,255,0.2);
}

.col-xs-6 {
  width: 38vw !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="cover-img">
  <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="some-box">
        Stay the same size
      </div>
    </div>
    <div class="col-xs-6">
      <div class="some-box">
        Stay the same size
      </div>
    </div>
  </div>
</div>
</div>

注意：视口的作用类似于百分比

更接近你想要的东西？

我如何在引导程序中执行Flex Grid

2 个答案: