Question

Goodmorning开发者，

我是前端开发的新手。我遇到了以下问题：

我想要一个头部div，头部内有4个子div。如何安装屏幕？（见草图）

亲切的问候

Answer 1

我认为你需要这个请检查：

请参阅Fiddle Demo

＆＃13;

.container {
  border: 3px solid;
  float: left;
  width: 100%;
}
.custom_box {
  float: left;
  width: 100%;
}
.custom_box1 {
  border: 3px solid;
  float: left;
  margin: 2%;
  text-align: center;
  width: 35%;
}
.custom_box2 {
  border: 3px solid;
  float: left;
  margin: 2%;
  text-align: center;
  width: 55%;
}

＆＃13;

<div class="container">
<div class="custom_box">
  <div class="custom_box1">
    <h1>1</h1>
  </div>
  <div class="custom_box2">
    <h1>2</h1>
  </div>
</div>
<div class="custom_box">
  <div class="custom_box1">
    <h1>1</h1>
  </div>
  <div class="custom_box2">
    <h1>2</h1>
  </div>
</div>
</div>

＆＃13;

Answer 2

这是小提琴：https://jsfiddle.net/9Lum94me/

还有其他方法可以使用CSS floats，flexbox和table-cell进行探索。

HTML：

<div class="container">

  <div class="row">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
  </div>
  <div class="row">
    <div class="column">Column 3</div>
    <div class="column">Column 4</div>
  </div>

</div>

CSS：

.container{
  border: 1px solid gray;
}
.row{
  padding: 10px;
}
.row .column{
  display: inline-block;
  min-width: 45%; min-height: 150px;  border: 1px solid gray; margin: 0 4% 0 0;
}

修改您必须根据需要管理列的宽度。

Answer 3

没有任何风格的bootstrap响应示例...（除了边界）。

小提琴example

.content{
  border:2px solid green;
  height:100px;
  width:92%;
  margin:20px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:1px solid blue;">
  <div class="col-lg-12 col-md-12 col-sm-12">
  
    <div class="row no-gutter-2">
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="content">Header1</div>
        </div>   
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="content">Header2</div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="content">Header3</div>
        </div>   
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="content">Header4</div>
        </div>
    </div>

  </div>
</div>

要测试响应性，请重新调整浏览器窗口的大小。上面的例子是对小型，中型和大型的响应。请在整页上运行代码段。

头部div有四个子div

3 个答案: