Question

所以我想创建一个侧边栏，然后是一些空间和一个内容区域。对于侧边栏和内容区域之间的间距，我想使用Bootstrap 3中的.offset- - 属性。但不知何故，它不能用作例外。

.main-content {
  height: 200px;
  background-color: green;
}

.sidebar {
  height: 200px;
  background-color: red;
}

.container {
  border: 1px solid blue;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example</title>
</head>
<body>
  <div class="container main-container">
      <div class="row">
          <!-- Sidebar -->
          <div class="sidebar col-md-3">
            sidebar
          </div>
          <!-- Main Content -->
          <div class="main-content col-md-8 offset-md-1">
            content
          </div>
      </div>
  </div>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

要了解我的意思，请运行示例并将swithc设置为“全页模式”。如您所见，偏移位于最右侧，而不是侧边栏和容器之间。如果我将它添加到侧边栏或主内容元素也没关系。

我的例子出了什么问题？

Answer 1

对内容div使用col-md-offset-1而不是offset-md-1。

.main-content {
  height: 200px;
  background-color: green;
}

.sidebar {
  height: 200px;
  background-color: red;
}

.container {
  border: 1px solid blue;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example</title>
</head>

<body>
  <div class="container main-container">
    <div class="row">
      <!-- Sidebar -->
      <div class="sidebar col-md-3">
        sidebar
      </div>
      <!-- Main Content -->
      <div class="main-content col-md-8 col-md-offset-1">
        content
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

bootstrap 3中的列偏移始终在右侧

1 个答案: