将文本设置在另一个文本的正下方

Question

我希望该段落位于我的导航栏品牌下方。

<nav class="navbar bg-dark">
<a class="navbar-brand"href="index.html">Shop online</a>
<p>Shop from home</p>
</nav>

我应用了以下css，但进展不顺利

nav p {
font-size: .9em;
color: #ffffff;
position: relative;
top: 3.5vh;
right: 182vh;
margin-top: 1vh;
}

Answer 1

请尝试此

nav p{
font-size:.9em;
color: #111;
position: absolute;
top:60px;
left:15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar bg-dark">
<a class="navbar-brand"href="index.html">Shop online</a>
<p class="d-block float-left">Shop from home</p>
</nav>

Answer 2

只需将display: block添加到您的p

或

添加引导d-block类

<nav class="navbar bg-dark">
<a class="navbar-brand" href="index.html">Shop online</a>
<p class="d-block">Shop from home</p>
</nav>

文件：https://getbootstrap.com/docs/4.0/utilities/display/

Answer 3

将段落标记放在nav标记下方。像这样：

<nav class="navbar bg-dark">
<a class="navbar-brand"href="index.html">Shop online</a>
</nav>
<p>Shop from home</p>

现在它将显示在导航栏下方。