Question

CODE

＆＃13;

<body align="left" style="background-color: white;">
  <div style="background-color:#1e836c;height:100vh;width:1vw;"></div>
  <div align="center" style="background-color: pink;height:100vh;width:1vw;"></div>
  <div align="right" style="background-color: red;height:100vh;width:1vw;"></div>
</body>

＆＃13;

如何通过保持width的{{1}}和div的大小来实现上述代码中的bootstrap网格系统？

Answer 1

我想让左右div非常小而中心有点大

您可以使用flexbox

实现这一目标

＆＃13;

.parent {
  display: flex;
  height: 200px
}
.child {
  flex: 1;
  margin: 0 5px;
  border: red solid
}
.parent > div:nth-of-type(2) {
  flex: 3 /* this will be 3x times bigger than the other child */
}

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

我可以通过为col-md-1提供引导网格模式来实现这一点左右和col-md-8为中心，但我想左转并且权利太小

使用bootstrap，您可以对较小的孩子使用col-xs-2（或col-xs-1），为中间孩子使用col-xs-8（col-xs-10)

我使用col-xs-2 + col-xs-10进行演示（有margins）

＆＃13;

[class^="col"] div {
  height: 200px;
  border: red solid
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-2">
      <div></div>
    </div>
    <div class="col-xs-8">
      <div></div>
    </div>
    <div class="col-xs-2">
      <div></div>
    </div>
  </div>
</div>

＆＃13;

我只想要那条红线的宽度。这就是棘手的部分

那不是`div`，那是 `border` 属性

在这里使用bootstrap网格和伪元素::before/::after：

＆＃13;

.col-xs-10 {
  height: 200px;
  border: red solid
}
.col-xs-10::before,
.col-xs-10::after {
  border-left: red solid;
  position: absolute;
  content: '';
  top: -3px;
  height: 200px
}
.col-xs-10::before {
  left: -20px
}
.col-xs-10::after {
  right: -20px
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1">
    </div>
  </div>
</div>

＆＃13;

Answer 2

我不太了解，但我认为是这样的：

＆＃13;

            #div-01{background-color: pink;height:100vh;width:1vw;float: left;} 
#div-02{background-color: red;height:100vh;width:1vw;float: right;}

＆＃13;

        <div id="div-01"></div>
<div id="div-02"></div>

＆＃13;

如果你想要其他的东西请详细解释

<强>更新这样做你的主要div位于中心，侧面浮动。

＆＃13;

            #div-center{border: solid blue;height:2000px;width:65%;display: block;margin: 0 auto;}
            #div-right{border: solid pink;height:200px;width:15%;position: fixed;right: 0px;} 
            #div-left{border: solid red;height:200px;width:15%;position: fixed;left: 0px;}

＆＃13;

        <div id="div-right"></div>
        <div id="div-left"></div>
        <div id="div-center"></div>

＆＃13;

如何使两个div 100％高度的浏览器窗口右上角和左上角

2 个答案:

那不是`div`，那是 `border` 属性

如何使两个div 100％高度的浏览器窗口右上角和左上角

2 个答案:

那不是div，那是 border 属性

那不是`div`，那是 `border` 属性