引导程序选项卡中的标题<h1>？</h1>

Question

我希望我的Bootstrap标签与我的页面标题（下面显示的模拟）齐平，但是标题高于其他标签会导致所有内容中断。我怎么能这样做？

<ul class="nav nav-tabs" role="tablist">
  <li><h1>Header</h1></li>
  <li class="active"><a href="#">Tab 1</a></li>
  <li><a href="#">Tab 2</a></li>
  <li><a href="#">Tab 3</a></li>
  <li class="pull-right"><button id="new-thing" class="btn btn-primary">New</button></li>
</ul>

这是我想要的字体大小和边距。现在我只需要将标签与底部边框齐平。 http://jsfiddle.net/bK4a4/4/

Answer 1

删除保证金

li h1 { margin: 0}

编辑后选项

• 将margin-top添加到其他元素。 fiddle
• 将line-height添加到h1 fiddle

Answer 2

尝试将此添加到您的CSS：

.nav-tabs h1 {
    font-size: 20px !important;
    margin-top: 10px !important;
    margin-right: 5px !important;
}

您可以更改字体大小，重量和边距以满足您的需求。

Answer 3

在你的html中，为标题创建一个类

<li><h1 class="header">Header</h1><li>

和你的csss

html, body {
    padding: 1em;
}

.header {
margin:0; 
padding:0;
padding-right:10px;
}

这是查看它的jsfiddle：jsFiddle Sample

Answer 4

这样的事情怎么样：

<ul class="nav nav-tabs" role="tablist">
<li><div style=" font-size:25px">Header&nbsp  </div></li>
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li class="pull-right"><button id="new-thing" class="btn btn-primary">New</button></li></ul>

使用内联css指定字体大小和边距