Question

我想添加标签，但我个人认为默认标签很难看。如果您这样做：

<h1>Example heading <span class="label label-default">New</span></h1>

然后标签看起来很大，标签的底部低于＆＃34; g＆＃34;在标题中。让我详细说明我的意思，＆＃34; headin＆＃34;如果底部相同，那么＆＃34;的底部低于普通字母的底部（如y，j等），标签的底部甚至低于底部。如果您仍然不知道我的意思，请参阅Bootstrap网站上的示例。

无论如何，我想要做的是拥有一个较小的标签，例如你用h3获得的尺寸，并让标签的顶部与文字的顶部对齐。再次让我解释一下，EAYlkt（不是在Stackoverflow的文本中）有相同的＆＃34; top＆＃34;就像我说＆＃34; headin＆＃34;的底部。所以我希望有一个较小的标签，它与顶部相似，有点像上标，或者与＆＃34; headin＆＃34;底部。

我有点得到我想要的东西：

<h1>Heading</h1><h3><span class="label label-default">New</span></h3>

in .css
.jumbotron h1, h3 {
    display: inline-block;
}

但是标签的底部与＆＃34; g＆＃34;的底部对齐，这是我不想要的一种方式。如果这令人困惑，请给我一个评论，我会尝试详细说明或发送给你一个链接，但希望我说明了我的观点。那么我该怎么做才能达到预期的效果呢？如果这是微不足道的，我很抱歉，但我才开始学习制作网页

Answer 1

我将从一些可能非传统但有根据的建议开始。随意忽略这个建议，但我认为它会对你有所帮助。

如果您刚开始使用Web开发，并且想要学习Web开发，请不要使用像Bootstrap这样的框架。这些框架旨在由了解下面的语言的人员部署，并且可以解决这样的简单问题，因为他们具有使用这些语言的经验。你不会真的通过使用Bootstrap学习Web开发（正确的HTML结构，CSS等），你只是学习Bootstrap。

在h3元素之后直接使用h1元素时，可以立即看到此证据。详细了解正确使用标题here。

关于问题。

CSS verticle-align property

您可以使用此属性在其父级内垂直对齐内联元素。

Demo

代码：

HTML

<h1>Hello<span class="subtitle">This is my subtitle</span></h1>

CSS

.subtitle {
  vertical-align: top;
  font-weight: 400;
  font-size: 0.5em;
}

Answer 2

当前版本的Bootstrap不支持标签大小类。

有两种选择。
首先，您可以将span标记包装在不同的标题大小（h1，h2，h3，h4）中。其次，为标签创建自定义类，并为该标签创建自定义CSS代码。

第一个选项：更改标题大小

注意： <h1>会创建一个比<h6>更大的标签

<h1>Heading<span class="label label-danger label-sm">Hot</span></h1>

<h5>Heading<span class="label label-danger label-sm">Hot</span></h5>

第二个选项：将类添加到Span + CSS样式


在HTML文件中将class =“label-sm”添加到<span>。

为span.label-sm
创建CSS样式
1。添加.label-sm到span

<span class="label label-danger label-sm">Hot</span>

2。为span.label-sm
创建CSS样式
span.label-sm {font-size:10px;}

Answer 3

虽然这可能无法解决OP在引导程序中标签垂直对齐的问题，但值得一提的是，在bootstrap中，您可以“使用通用<small>标记或.small在任何标题中创建更轻的辅助文本class“（见CSS Bootstrap）。

如果您将标签放在“小”标签内，它也会更小更轻。

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<h1>Example heading <span class="label label-default">New</span></h1>
<h1>Example heading <small><span class="label label-default">New</span></small></h1>

在h1中添加不同大小的标签

3 个答案:

第一个选项：更改标题大小

第二个选项：将类添加到Span + CSS样式

1。添加.label-sm到span

2。为span.label-sm