Question

我有一个Bootstrap导航栏。其中包括徽标，品牌标题和字幕。我要在品牌标题下添加字幕，但要在徽标下添加字幕。我也尝试过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>。

在此示例中，我为跨度为ml-3的类提供了{em {1}}，为1em。

margin-left

.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;
}

如何在Bootstrap Navbar品牌文字下放置字幕

1 个答案: