在响应式网页设计中拉伸框

时间：2019-04-28 11:56:33

标签： html css twitter-bootstrap

我正在尝试使用媒体查询来设计响应式网页设计，与此同时，我已经针对大中型设备进行了设计，一切正常，但是对于中型设备，当我将浏览器压缩到992像素以下时标题为 sushi 的框会下移，并占用媒体查询代码中指定的50％的空间，但是我希望这样做，以便当它下移时可以扩展整个浏览器的宽度。

我试图通过在媒体查询中指定Sushi类并将def __repr__(self): return f"<id={self.id}, username={self.username}>" 设置为width来做到这一点，但这在响应式设计中不起作用。 

196%
* {
  box-sizing: border-box;
}

h1 {
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.chicken {
  border: solid 1px black;
  background-color: grey;
  margin: 10px;
}

.box1title {
  border: 2px solid black;
  background-color: pink;
  width: 88px;
  float: right;
}

.b1content {
  text-align: center;
}

.beef {
  border: solid 1px black;
  background-color: grey;
  margin: 10px;
}

.box2title {
  border: 2px solid black;
  background-color: rgb(170, 57, 57);
  width: 88px;
  float: right;
}

.b2content {
  text-align: center;
}

.sushi {
  border: solid 1px black;
  background-color: grey;
  margin: 10px;
}

.box3title {
  border: 2px solid black;
  background-color: rgb(255, 255, 170);
  width: 88px;
  float: right;
}

.b3content {
  text-align: center;
}

p {
  clear: both;
  padding: 5px;
}

.container {
  width: 100%;
}

@media(min-width: 992px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: 8.83%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 66.66%;
  }
  .col-lg-8 {
    width: 74.99%;
  }
  .col-lg-9 {
    width: 8.83%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.83%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
    clear: right;
  }
  .col-md-7 {
    width: 66.66%;
  }
  .col-md-8 {
    width: 74.99%;
  }
  .col-md-9 {
    width: 8.83%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
}

当浏览器被压缩到<div class="container"> <div class="col-lg-4 col-md-6"> <div class="chicken"> <div class="box1title"> <div class="b1content">Chicken</div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="beef"> <div class="box2title"> <div class="b2content">Beef</div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="sushi"> <div class="box3title"> <div class="b3content">Sushi</div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div>像素以下的图片时，我的带有寿司标题的桌子应该伸展到最大，如下图所示。

enter image description here

2 个答案:

答案 0 :(得分：2)

您可以将寿司盒的col-md-6更改为col-md-12，以便在屏幕达到正确尺寸时，您的容器将覆盖所有12列：

<div class="col-lg-4 col-md-12"> <!-- <- change col-md-6 to col-md-12 -->
  <div class="sushi">
    ...
  </div>
</div>

请参见以下示例： 

* {
  box-sizing: border-box;
}

h1 {
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.chicken {
  border: solid 1px black;
  background-color: grey;
  margin: 10px;
}

.box1title {
  border: 2px solid black;
  background-color: pink;
  width: 88px;
  float: right;
}

.b1content {
  text-align: center;
}

.beef {
  border: solid 1px black;
  background-color: grey;
  margin: 10px;
}

.box2title {
  border: 2px solid black;
  background-color: rgb(170, 57, 57);
  width: 88px;
  float: right;
}

.b2content {
  text-align: center;
}

.sushi {
  border: solid 1px black;
  background-color: grey;
  margin: 10px;
}

.box3title {
  border: 2px solid black;
  background-color: rgb(255, 255, 170);
  width: 88px;
  float: right;
}

.b3content {
  text-align: center;
}

p {
  clear: both;
  padding: 5px;
}

.container {
  width: 100%;
}

@media(min-width: 992px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: 8.83%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 66.66%;
  }
  .col-lg-8 {
    width: 74.99%;
  }
  .col-lg-9 {
    width: 8.83%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.83%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
    clear: right;
  }
  .col-md-7 {
    width: 66.66%;
  }
  .col-md-8 {
    width: 74.99%;
  }
  .col-md-9 {
    width: 8.83%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
}
<div class="container">
  <div class="col-lg-4 col-md-6">
    <div class="chicken">
      <div class="box1title">
        <div class="b1content">Chicken</div>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <div class="col-lg-4 col-md-6">
    <div class="beef">
      <div class="box2title">
        <div class="b2content">Beef</div>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <div class="col-lg-4 col-md-12">
    <div class="sushi">
      <div class="box3title">
        <div class="b3content">Sushi</div>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

答案 1 :(得分：1)

如果我们将<div class="col-lg-4 col-md-6">更改为<div class="col-lg-4">，它将起作用...选中https://stackblitz.com/edit/js-w2je7d?file=index.html

相关问题
最新问题