html - 如何在 Bootstrap 导航栏品牌文本下放置副标题

Question

我有一个 Bootstrap 导航栏。其中包括 Logo 、品牌标题和副标题。我想要品牌标题下的副标题，但它在 Logo 下。我也尝试过 flex 属性，但我认为我把它搞砸了，所以即使这样也没有用。我对所有这一切都是新手，所以我希望我能原谅任何愚蠢的错误。

.navbar-custom {
	margin-bottom:0;
	border-bottom:1px solid rgba(255,255,255,.3);
	text-transform:uppercase;
	font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:13px;
}
.navbar-custom .dropdown-item {
	font-size:13px;
    text-transform: none;
}
.navbar-custom .navbar-brand {
	font-size:20px;
	text-transform:none;
	letter-spacing:1px;
}
.navbar-custom .navbar-brand:focus {
	outline:0;
}
.navbar-custom .navbar-brand .navbar-toggle {
	padding:4px 6px;
	font-size:16px;
	color:#ffffff;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,.navbar-custom .navbar-brand .navbar-toggle:active {
	outline:0;
  
  .navbar-brand small {
    display: block;
    font-size: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-expand-lg navbar-custom fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html"><img src="https://picsum.photos/75" height="75" class="d-inline-block" alt="">  <span>Lorem Logo <br><small>Subtitle</small></span></a>
            <button class="navbar-light navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarsDefault">
                <ul class="navbar-custom navbar-nav ml-auto">

                    <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                    </li>

                    <li class="nav-item">
                    <a class="nav-link" href="portfolio-item.html">Project</a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More</a>
                        <div class="dropdown-menu" aria-labelledby="dropdown01">
                        <a class="dropdown-item" href="page.html">Page Layout</a>
                        <a class="dropdown-item" href="post.html">Post Layout</a>
                        
                        </div>
                    </li>

                    <li class="nav-item">
                    <a class="nav-link" href="contact.html">Hire me</a>
                    </li>

                    

                </ul>

            </div>
        </div>
    </nav>

Answer 1

只需添加 d-flex类别为 .navbar-brand并给出 padding-left或 margin-left到 <span>包含您的 Logo 和副标题。

我给了那个跨度类ml-3给它一个margin-left本例中为 1em。

.navbar-custom {
	margin-bottom:0;
	border-bottom:1px solid rgba(255,255,255,.3);
	text-transform:uppercase;
	font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:13px;
}
.navbar-custom .dropdown-item {
	font-size:13px;
    text-transform: none;
}
.navbar-custom .navbar-brand {
	font-size:20px;
	text-transform:none;
	letter-spacing:1px;
}
.navbar-custom .navbar-brand:focus {
	outline:0;
}
.navbar-custom .navbar-brand .navbar-toggle {
	padding:4px 6px;
	font-size:16px;
	color:#ffffff;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,.navbar-custom .navbar-brand .navbar-toggle:active {
	outline:0;
  
  .navbar-brand small {
    display: block;
    font-size: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-expand-lg navbar-custom fixed-top">
        <div class="container">
            <a class="navbar-brand d-flex" href="index.html">
            <img src="https://picsum.photos/75" height="75" class="d-inline-block" alt="">      <span class="ml-3">Lorem Logo <br><small>Subtitle</small></span></a>
            <button class="navbar-light navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarsDefault">
                <ul class="navbar-custom navbar-nav ml-auto">

                    <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                    </li>

                    <li class="nav-item">
                    <a class="nav-link" href="portfolio-item.html">Project</a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More</a>
                        <div class="dropdown-menu" aria-labelledby="dropdown01">
                        <a class="dropdown-item" href="page.html">Page Layout</a>
                        <a class="dropdown-item" href="post.html">Post Layout</a>
                        
                        </div>
                    </li>

                    <li class="nav-item">
                    <a class="nav-link" href="contact.html">Hire me</a>
                    </li>

                    

                </ul>

            </div>
        </div>
    </nav>