为什么div行在这里不工作？

我正在尝试使用div行的HTML创建顶部标题。左侧应该有一个字，左侧应该有三个字;全部在行内。然而，结果证明，所有四个单词都堆叠在不同的行上。我从代码中找不到任何错误。为什么div行在这里不工作？

<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>

来源

2016-12-04 tnkh

已包含引导？ –

它为我工作..http：//codepen.io/anon/pen/YpeJWd 作为由kk的指针你添加了bootstrap？ – RohitS

是的，它的工作原理。谢谢！我包含了错误的引导程序库。 – tnkh

我假设你正在使用的类，你正在使用Bootstrap。确保引用CSS和JavaScript文件被引用。你的HTML似乎在这个小提琴正常工作： 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>

你应该有下面的代码（或指向你的引导文件的等效代码）的地方在页面上：

<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">

来源

2016-12-04 12:53:14

引导程序.row类是定义-15px的左和右边缘。

但是你用你的margin覆盖了这个：-8px;，这就是为什么列不再适合这一行。

删除margin：-8px; margin-top：-20px它会工作。

来源

2016-12-04 12:53:12

为什么div行在这里不工作？

回答

相关问题