Question

这是我想要的输出：

这是我得到的输出：

正如您可以看到子列添加到总共12列，但是当我向容器类添加5px的边距时，最后一个容器列包装了我不想要的并且无法弄清楚如何解决它。因为我是初学者，所以非常感谢所有帮助Thanx in adavance：）

＆＃13;

body{
  margin:0px;
  padding:0px;
}
.container{
  height: 100vh;
  max-height: 100vh;
  padding: 0px;
}
.nav-col{
  background-color: #ABABAB;
  height: 100vh;
  max-height: 100vh;
  padding:0px;
  margin:0px;
}
.header{
  background-color: #E2E2E2;
  height: 20vh;
  max-height: 20vh;
  padding: 0px;
}
.content{
  background-color: #E2E2E2;
  height: 80vh;
  max-height: 80vh;
  padding:0px;
  margin:0 0px;
}
.p-0{
  padding:0px;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap form</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <div class="container">
  <div class="row">
   <div class="col-md-4 nav-col">
     <div>hello</div>
   </div>
   <div class="col-md-7 p-0">
     <div class="col-md-12 header p-0"></div>
         <div class="col-md-4 content ">hello</div>
         <div class="col-md-4 content">hello</div>
         <div class="col-md-4 content">hello</div>
     </div>
   </div>
 </div>
  </body>
</html>

＆＃13;

Answer 1

此处包含您需要的引导程序模板的代码

＆＃13;

body {
  margin: 0px;
  padding: 0px;
}

.container {
  height: 100vh;
  max-height: 100vh;
  padding: 0px;
}

.nav-col {
  background-color: #ABABAB;
  height: 100vh;
  max-height: 100vh;
}

.header {
  background-color: #E2E2E2;
  height: 20vh;
  max-height: 20vh;
}

.content {
  background-color: #E2E2E2;
  height: 73vh;
  max-height: 73vh;
}

.top-buffer{
  margin-top: 30px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Bootstrap form</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div class="container">
    <div class="row gutter-small">
      <div class="col-xs-3">
        <div class="nav-col">hello</div>
      </div>
      <div class="col-xs-9">
        <div class="row gutter-small">
          <div class="col-xs-12"><div class="header"></div></div>
        </div>
        <div class="row top-buffer gutter-small">
          <div class="col-xs-4"><div class="content"></div></div>
          <div class="col-xs-4"><div class="content"></div></div>
          <div class="col-xs-4"><div class="content"></div></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

添加到12但仍然包装（列嵌套）

1 个答案: