Question

我有一个设计，我使用Bootstrap 12列指南在photoshop中进行了模拟。每当我尝试在Bootstrap中模拟它时，结果都不像我想要的那样。

我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
    body {
    background-color: #cacaca;

    }
    .container{

    }
    /* Remove the navbar's default margin-bottom and rounded borders */
    .navbar {
      margin-bottom: 0;
      border: 0px solid black;
      border-radius: 0;
b     ackground-color: #2a2b2d;
    }

    .bottom-nav {
      background-color: #1d1e20;
      border: 0px solid black;
      margin-top: 0;
    }
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {
      height: 100px
    }

    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }

    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    .text-left{
      margin-top: 105px;
        border:1px solid black;
        background-color:white;
      }
    .blog{
        border:1px solid black;
        background-color:white;
        margin-right: 10px;
}
  .sidebar{
    margin-left: 10px;
        border:1px solid black;
        background-color:white;
}

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: 280;
        width:280;
        margin:20px;

      }
      .row.content {height:auto;}
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">

      </ul>
      <ul class="nav navbar-nav navbar-right">
         <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
 <nav class="bottom-nav">
 &nbsp;
</nav>
<div class="container text-center">
  <div class="row content">
    <div class="col-md-3 text-left">.col-md-3</div>
    <div class="col-md-3 text-left">.col-md-3</div>
    <div class="col-md-3 text-left">.col-md-3</div>
    <div class="col-md-3"></div>
  </div>
  <div class="row">
    <div class="col-md-9 blog">.col-md-9</div>
    <div class="col-md-3 sidebar">.col-md-3</div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>
</html>

我的问题是，在我的模型中，我有10px的＆＃34; gutter＆＃34;在每一列之间，每当我添加＆＃34; margin＆＃34; CSS，它会使页面失控。

此外，主要博客块（大白色）是9列。侧边栏（旁边的黑色东西）是3列。每当我输入带有边距的相应列时，它会将其推送到新行。像这样：

我对引导程序真的很新，但是它让我失去了一个循环！任何帮助表示赞赏！我真的很想好好学习。

另外，有没有办法像我在模型中那样使列居中？

Answer 1

首先：从.blog和.sidebar中删除margin-right和margin-left。那么：你可以把div放在div.col-md-3里面，宽度为：100％，background-color：white，并从div.sidebar中删除background-color：white。

ssh-add keyfile

我希望它可以帮助你...

Answer 2

您是否尝试在第一行之后关闭容器div，并为第二行打开第二个容器？当容器中超过12列

时，Bootstrap会执行环绕式操作

使用Bootstrap正确排列的列

2 个答案: