bootstrap

Question

我正在尝试使用5个DIV制作页面 计划是使用Bootstrap 3在中央DIV中放置一张图片，在其他4张中放置一个链接。

通缉结果：

到目前为止

代码：

.container-fluid2 {
  min-height: 100%;
  overflow: hidden;
  background-color: black;
}
.levogore5 {
  height: 50%;
  min-height: 50%;
  margin-bottom: -22%;
  padding-bottom: 22%;
  min-width: 25%;
  max-width: 100%;
  background-color: lime;
  vertical-align: top;
}
.levodole5 {
  height: 50%;
  min-height: 50%;
  margin-bottom: -25%;
  padding-bottom: 25%;
  min-width: 25%;
  max-width: 100%;
  background-color: green;
  vertical-align: baseline;
  margin-top: 22%;
}
.centar5 {
  height: 100%;
  min-height: 100%;
  min-width: 50%;
  max-width: 100%;
  background-color: red;
  margin-bottom: -50%;
  padding-bottom: 50%;
  overflow: hidden;
}
.desnogore5 {
  height: 50%;
  min-height: 50%;
  margin-bottom: -22%;
  padding-bottom: 22%;
  min-width: 25%;
  max-width: 100%;
  background-color: aqua;
  vertical-align: top;
}
.desnodole5 {
  height: 50%;
  min-height: 50%;
  margin-bottom: -25%;
  padding-bottom: 25%;
  min-width: 25%;
  max-width: 100%;
  background-color: blue;
  vertical-align: baseline;
  float: right;
  margin-top: 22%;
}

<div class="container-fluid2">
  <div class="row">
    <div class="col-sm-3 levogore5">levo gore</div>
    <div class="col-sm-5 col-sm-5 span2 centar5">centralni</div>
    <div class="col-sm-3 desnogore5">desno gore</div>
  </div>
  <div class="row">
    <div class="col-sm-3 levodole5">levo dole</div>
    <div class="col-sm-3 desnodole5">desno dole</div>
  </div>
</div>

我想我在这里阅读了所有现有的问题和答案 我尝试了html/body 100%，max-height，container-fluid，-9999px，但它们无效。

我忘了提及，响应性是至关重要的，在我的例子中，那些浮动：正确（在最后DIV的CSS中），在较小的屏幕上造成非常大的混乱。

我的想法是使用bootstrap来减少较小屏幕的问题，在更简单的页面引导程序只是制作一堆水平DIV所以我希望有这样的东西

Answer 1

这是一个使用flex box的地方的一个很好的例子！

在我看来，你采取基于行的方法来解决这个问题。我认为基于列的方法更合适。

当我设计网站时，我想尝试将其分解为横跨页面宽度或高度的正方形或矩形。

在我看来，这个设计有一个横跨页面宽度的矩形，它包含横跨页面高度的3个矩形，然后是每个矩形中的一些较小的矩形。

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
}
.column > div {
  border: 1px solid blue;
  min-height: 150px;
}
@media (min-width: 600px) {
  .row {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
  }
  .row > div {
    flex-basis: 25%;
  }
  .row > div.main {
    flex-basis: 50%;
  }
  .column {
    display: flex;
    flex-direction: column;
  }
  .column > div {
    flex-basis: 50%;
  }
  .column.main > div {
    flex-basis: 100%;
  }
}

＆＃13;

<div class="row">
  <div class="column">
    <div>Div width 25% height 50%</div>
    <div>Div width 25% height 50%</div>
  </div>
  <div class="column main">
    <div>Div width 50% height 100%</div>
  </div>
  <div class="column">
    <div>Div width 25% height 50%</div>
    <div>Div width 25% height 50%</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

无需修改引导网格的响应示例 （额外的分数，因为你不应该修改网格，否则你将无法在每个场景中使用它）

我必须更改你的html并添加几个类：

<div class="container-fluid container-table">
  <div class="row inline-row">
    <!-- I'm using three columns and nesting aqua and blue under the 1st column -->
    <div class="col-xs-12 col-sm-3">
      <div class="row">
        <div class="col-xs-12 aqua"></div>
        <div class="col-xs-12 blue"></div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 yellow"></div>

    <!-- Nesting greenyellow and green -->
    <div class="col-xs-12 col-sm-3">
      <div class="row">
        <div class="col-xs-12 greenyellow"></div>
        <div class="col-xs-12 green"></div>
      </div>
    </div>

  </div>
</div> 

CSS：

/* Colors */
.aqua{ background-color:aqua; }
.blue{ background-color:blue; }
.yellow{ background-color:yellow; }
.greenyellow{ background-color:greenyellow; }
.green{ background-color:green; }

/* Height 100% to all the elements */
html, 
body, 
.container-table, 
.inline-row, 
.inline-row > div {
    height: 100%;
}

/* We do the trick here with Table, table row and table-cell */
.container-table {
    display: table;
    width: 100%; /* Width is important for display:table */
}
.inline-row { display: table-row; }
.inline-row > div { display: table-cell; }

/* This will set our heights as we need them */
.inline-row > div > .row { height: 100%; }
.inline-row > div .row > div { height: 50%; }

编辑：将左右网格更改为宽度的25％。

My JsFiddle Live example

Answer 3

Fiddle

简而言之，你制作了6个盒子 你还想要它们之间没有填充吗？

如果是这样，只需添加到您的CSS：

[class*='col-'] {
    padding-right:0;
    padding-left:0;
}

HTML：

<div class="container-fluid2">
  <div class="row">
    <div class='col-sm-3'>
      <div class="bg-color-red">left 3</div>
      <div class="bg-color-green">left 3</div>
    </div>
    <div class="col-sm-6 bg-color-green">
          <div class="bg-color-green">central 6</div>
    <div class="bg-color-green">central 6</div>
    </div>

    <div class='col-sm-3'>
      <div class="bg-color-red">right 3</div>
      <div class="bg-color-green">right 3</div>
    </div>
  </div>
</div>

CSS：
引导。见小提琴。

Answer 4

我已经为您提供了下面的代码，该代码可以从较小的桌面到最大的桌面（在所有情况下都是桌面）使用引导程序。正如你所说，在移动设备上你喜欢堆积，然后根本不写col-sm-*类和@media查询

＆＃13;

＆＃13;

.height-50{
  height : 480px;
}

.height-100{
  height : 960px;
}

.container-fluid div{
  border : 1px solid black;
}

@media (min-width: 576px) {
  .height-50{
    height : 230px;
  }

  .height-100{
    height : 460px;
  }
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<div class="container-fluid">
  <div class="col-lg-3 col-sm-3">
    <div class="row">
      <div class="col-lg-12 col-sm-12 height-50" style="background-color : lightgray">
        Width : 25%;<br>Height : 50%;
      </div>
      <div class="col-lg-12 col-sm-12 height-50" style="background-color : #9898e7">
        Width : 25%;<br>Height : 50%;
      </div>
    </div>
  </div>
  <div class="col-lg-6  col-sm-6">
    <div class="row">
      <div class="col-lg-12 col-sm-12 height-100" style="background-color : yellow">
        Width : 50%;<br>Height : 100%;
      </div>
    </div>
  </div>
  <div class="col-lg-3  col-sm-3">
    <div class="row">
      <div class="col-lg-12 col-sm-12 height-50" style="background-color : yellowgreen">
        Width : 25%;<br>Height : 50%;
      </div>
      <div class="col-lg-12 col-sm-12 height-50" style="background-color : green">
        Width : 25%;<br>Height : 50%;
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;