Question

这可能是一个愚蠢的问题，但为什么这个jsbin链接：

https://jsbin.com/gukidacero/edit?html,output

当div类“col”中直接存在文本时，通过垂直堆叠“col stack vertical”垂直处理引导程序列系统。我究竟做错了什么？我在bootstrap的页面上看过这样的例子。

对于我在jsbin中的输出看起来像：

水平堆叠水平堆叠垂直堆叠垂直堆叠垂直堆叠垂直堆栈

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>

  <div class="container">
    <div class="row">
      <div class="col navbar-text">col stack horizontally</div>
      <div class="col navbar-text">col stack horizontally</div>
    </div>
  </div>


  <div class="container">
    <div class="row">
      <div class="col">col stack vertically</div>
      <div class="col">col stack vertically</div>
      <div class="col">col stack vertically</div>
      <div class="col">col stack vertically</div>
    </div>
  </div>

</body>
</html>

Answer 1

bootstrap v3中没有.col个课程 - 您使用错误了：

通过指定要跨越的十二个可用列的数量来创建网格列。例如，三个相等的列将使用三个.col-xs-4。

然而，在bootstrap v4 there is a .col class。

注意：这些样式来自.navbar-text类 - 如果您检查元素，您将看到应用的样式：

@media (min-width: 768px)       
    .navbar-text {
        float: left;
        margin-right: 15px;
        margin-left: 15px;
    }
}

.navbar-text {
    margin-top: 15px;
    margin-bottom: 15px;
}

为什么直接在<div class“col”=“”>中放置文本会破坏引导列系统

1 个答案: