为什么 div 行在这里不起作用？

Question

我正在尝试使用 div 行创建顶部 header 和 HTML。左边应该有一个字，左边还有另外3个字；都在行内。然而，结果证明所有四个单词都在不同的行上堆叠在一起。我从我的代码中找不到任何错误。

<div class="container-fluid">
<div class="row" style="background-color:orange; margin:-8px; margin-top:-20px">
<div class="col-md-1">
</div>
<div class="col-md-1">
  <h3>stark</h3>
</div>
<div class="col-md-6">
</div>
<div class="col-md-1">
  <h3>about</h3>
</div>
<div class="col-md-1">
  <h3>portfolio</h3>
</div>
<div class="col-md-1">
  <h3>contact</h3>
</div>
<div class="col-md-1">
</div>

Answer 1

Bootstrap.row class 定义了 -15px 的左右边距。

但是您用 margin: -8px; 覆盖了它，这就是列不再适合行的原因。

删除边距：-8px； margin-top:-20px 它会起作用。

Answer 2

根据您正在使用的类，我假设您正在使用 Bootstrap。确保引用 bootstrap css 和 javascript 文件。您的 html 似乎在此 fiddle 中正常工作： https://jsfiddle.net/e29aju5c/

<div class="container-fluid">
<div class="row" style="background-color:orange; margin:-8px; margin-top:-20px">
<div class="col-md-1">
</div>
<div class="col-md-1">
  <h3>stark</h3>
</div>
<div class="col-md-6">
</div>
<div class="col-md-1">
  <h3>about</h3>
</div>
<div class="col-md-1">
  <h3>portfolio</h3>
</div>
<div class="col-md-1">
  <h3>contact</h3>
</div>
<div class="col-md-1">
</div>

您应该在页面某处包含以下代码（或指向您的 bootstrap 文件的等效代码）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

为什么 div 行在这里不起作用？

Why is div row not working here?

html

division