Bootstrap 3是前端框架的第三代，允许更快速的Web开发，具有迷人的外观和感觉。与[twitter-bootstrap]标签一起使用
Bootstrap 行类包含 margin-left 和 margin-right 这会产生问题
我正在使用 Bootstrap 'row' 类将 div 一个放在另一个上面，效果很好，但是 。排 { 左边距：-15px； 右边距：-15px； } 我注意到它指定了 margin-lef...
Bootstrap 4 中的 .btn-default 去哪儿了？
根据 Bootstrap 3 到 Bootstrap 4 迁移文档： 纽扣 将 .btn-default 重命名为 .btn-secondary。 但 Bootstrap 4 .btn-secondary 看起来一点也不像旧的默认按钮。
如何使项目宽度适合Bootstrap 3中的文本长度？我的菜单项比文本短，这导致我的 class="active" 看起来很难看。 这是它发生的导航栏... 如何使 <li> 项目宽度适合 Bootstrap 3 中的文本长度？我的菜单项比文本短，这导致我的 class="active" 看起来很难看。 这是它发生的导航栏： <div id="menu" class="col-md-1"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Startseite</a></li> <li><a href="kontakt.php">Kontakt</a></li> </ul> </div> 开设.custom_li课程并给予 .custom_li{ display:inline-block; } 编辑 为了强制相同的尺寸，我建议使用 max-width 并将其放在一些 media-query 下 li{ display: inline-block; max-width:50%; /* limit width */ word-break:break-all; /* wrap extended text*/ border:1px solid red /* demo */ } 演示在这里 一些可选的东西 一些可选的东西 当我尝试display: inline-block;时，它会移除子弹。 相反，我使用 float:left; 让它们仅与文本一样宽，同时保留项目符号。 （可选）添加 clear:both; 以将其保留为垂直列表，每个项目都在新行上。 CSS .my-list > li { float: left; clear: both; /* remove this if you want them flowing inline */ } HTML <ul class="my-list"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> </ul> 如果 display: inline-block; 或 display: block; 弄乱了对齐。 然后就用width: fit-content; 通过将 display: inline-block; 添加到适当的元素来防止它成为块。 如果您想要详细信息，请发布更多代码，最好是 CSS。 我让它可以与以下 css 一起使用： ul { margin: 0 auto; width: fit-content; } li{ display:flex; margin: 0.5rem auto; } 基本上我所做的就是使容器宽度适合内容。使用CSS hack来确保它会使用边距居中。在 li 标签中，我希望内容居中，所以我这样设置 使用 display: inline-block 折叠了我的列表项，这是我不想要的。使用 display: block; width: fit-content 就是解决方案。
如何解决引导导航栏面临的这 3 个问题： 调整大小时菜单无法正确折叠（窗口变小） 将图标放在菜单链接旁边而不是下方 有...
我正在尝试从 Pixabay api 中获取图像数据，我想显示编辑器选择的图像。 问题在于布局。我试图在每行显示 3 或 4 个图像，但布局是
我有一个带有自己的css文件的项目。 现在我想使用一些图标。 Bootstrap 图标是一个不错的选择。但是，我只需要图标。我不需要任何其他东西。我进入自定义页面自定义我的
是否可以在 Bootstrap 3 中并排显示两个表格？ 每个人都尝试制作每一个 col-md-6，虽然它缩小了宽度，但它们不会彼此相邻包装（相反，一个是在......
为什么当我单击齿轮图标时没有出现我的 Bootstrap 下拉菜单？
我试图在单击时显示齿轮图标和下拉菜单。 这是我的代码，但下拉菜单没有出现。 有什么想法我做错了什么吗？ 我试图在单击时显示齿轮图标和下拉菜单。 这是我的代码，但下拉菜单没有出现。 有什么想法我做错了什么吗？ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery 3.4.1 --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Bootstrap 3.4.1 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- Bootstrap 3.4.1 JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="dropdown"> <h4> Drop down menu test: <i class="bi bi-gear" style="cursor: pointer;" data-toggle="dropdown"></i> </h4> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <!-- Add more menu items as needed --> </ul> </div> </body> 您有一些与 docs 和良好的语义标记不相符的内容： 切换器应该是一个按钮。标题不是可点击的元素，不应该这样使用，以实现可访问性。 下拉菜单必须是其切换器的下一个兄弟。这意味着将其放入标题元素内。不幸的是，从语义角度来看这也很糟糕，因此请考虑重构布局来解决这个问题。 不要省略文档中显示的 ARIA 属性，也是为了可访问性。 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery 3.4.1 --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Bootstrap 3.4.1 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- Bootstrap 3.4.1 JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="dropdown"> <h4> Drop down menu test: <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="bi bi-gear"></i></button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBtn"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </h4> </div> </body> 这是我的“最终”代码，包含@isherwood 的更改 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery 3.4.1 --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Bootstrap 3.4.1 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- Bootstrap 3.4.1 JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="d-flex align-items-center"> <h4 style="display: inline;">Drop down menu test:</h4> <div class="dropdown" style="display: inline-block;" > <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="bi bi-gear"></i> </button> <ul class="dropdown-menu" aria-labelledby="dropdownBtn"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> </div> </body>
使用 $.cookie() 的 cookies 保存多个面板的折叠状态
我正在尝试确定如何使用 $.cookie 保存可折叠面板的折叠状态。 到目前为止，这个问题很有帮助，但仍然缺少最终的解决方案。 我有什么解决方案...
将 bootstrap 列拆分为 n 行，高度相等，填充父级高度
我对 Bootstrap 很陌生，在尝试重现以下模板时，我正在与网格系统作斗争： 在此示例中，我有 3 列： 第一列包含一些信息/图片。这个合作...
我试图将图像始终放在某些元素的中间和中心，唯一的问题是它不起作用 这是我的代码 CSS .panel - 空{ 宽度：100%； 高度：400 像素； /*...
这是您通常使用切换器的方式吗？例如，在本例中，我通过将变量设置为“禁用”来禁用它。 如果@code 中选中或没有选中，如何获取该值
Bootstrap 3.3.2 移动导航子菜单按钮在单击时未显示在父按钮下
我希望在 Bootstrap 3.3 中修复我的移动导航，以在单击时显示子菜单项。父按钮不应链接到任何内容，而只显示子链接。 目前导航不会显示
如果状态更改为 true 或 false，如何动态更改某些引导开关 CSS 类？事实上，如果可能的话，添加一个新类也可能会解决我的问题。有没有简单的...
我正在尝试以悬停使按钮颜色变浅而不是颜色变深的方式设计按钮的样式。我尝试了引导程序自定义页面（http://getbootstrap.com/customize/），它...
假设我们有以下代码： ... 假设我们有以下代码： <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="col-sm-8 col-md-9"> <router-outlet></router-outlet> </div> </div> </div> 当 router-outlet 获取的组件是 myComponent 时，我想为 <div class="col-sm-8 col-md-9"> 提供彩色背景。这样做的目的是我希望背景颜色占据列的所有宽度。 有人有窍门吗？ 您可以通过以下方式完成这项工作： [style.background-color]="getBackgroundColor()" 在你的component.ts中： constructor(private router: Router) { } ngOnInit() { this.router.events.subscribe((route: any) => this.route= route); } getBackgroundColor() { if (this.url) { if (this.route.url === '/yourRoute'{ return 'white' } else { return '#6772e5' } } else { return '#6772e5' } } 有几种方法可以做到这一点。如果您希望父组件在某个子组件处于活动状态时更改样式，则需要一些编码才能解决。 方法一：共享服务 您需要创建一个共享服务来控制父组件订阅的状态。 “emitChange”方法将更改状态“fillColorSubject”，该状态作为可观察的“fillColor”返回以进行订阅。 填充颜色服务.ts： import { Observable } from 'rxjs/Observable'; import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class FillColorService { private fillColorSubject = new Subject<boolean>(); fillColor = this.fillColorSubject.asObservable(); emitChange(fill : boolean) { this.fillColorSubject.next(fill); } } 子组件将在初始化和销毁时向服务发出更改。 my.component.ts： import { Component, OnInit, OnDestroy } from '@angular/core'; import { FillColorService } from 'fill-color-service'; @Component( { templateUrl: 'my.component.html' } ) export class myComponent implements OnInit, OnDestroy { constructor ( private _fillColorService: FillColorService ) { } ngOnInit() { this._fillColorService.emitChange(true); } ngOnDestroy() { this._fillColorService.emitChange(false); } } 现在父组件需要订阅该服务。当状态改变时，一个开关（fillColumn）将改变列状态。 parent.component.ts: import { Component } from '@angular/core'; import { FillColorService } from 'fill-color-service'; @Component( { templateUrl: 'parent.component.html' } ) export class parentComponent { fillColumn : boolean; constructor ( private _fillColorService: FillColorService ) { _fillColorService.fillColor .subscribe( fill => { this.fillColumn = fill; }); } } 您的模板需要能够通过条件类反映更改。 parent.component.html: <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="col-sm-8 col-md-9" [ngClass]="{ 'fill': fillColumn }"> <app-component></app-component> </div> </div> </div> 方法2：从Child发出事件 此方法不起作用，因为它不允许绑定。您需要为此定义自己的选择器。除了通过直接事件绑定之外，此方法与共享服务的思路相同。 首先，父类有一个方法（fillColor），可以触发该方法来改变开关（fillColumn）。 parent.component.ts: import { Component } from '@angular/core'; @Component( { templateUrl: 'parent.component.html' } ) export class parentComponent { fillColumn : boolean; fillColor( fill : boolean = false ) { this.fillColumn = fill; } } 然后，子 myComponent 需要发出一个带有布尔值的事件 (fillParentColor) 来触发父组件的更改。 my.component.ts： import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core'; @Component( { selector: 'app-component', templateUrl: 'my.component.html' } ) export class myComponent implements OnInit, OnDestroy { @Output() fillParentColor = new EventEmitter<boolean>(); ngOnInit() { this.fillParentColor.emit(true); } ngOnDestroy() { this.fillParentColor.emit(false); } } 最后，您的模板需要能够在发出子事件时触发父组件事件。当 myComponent 的“fillParentColor”事件被触发时，parentComponent 的“fillColor”事件将被触发，并带有一个布尔参数。您还需要根据“fillColumn”开关将条件类（填充）添加到您的列中。 parent.component.html: <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="col-sm-8 col-md-9" [ngClass]="{ 'fill': fillColumn }"> <app-component (fillParentColor)="fillColor($event)"></app-component> </div> </div> </div> 简答 使用： ：主机{背景：矢车菊蓝色； } 作为托管组件的 CSS，用于更改路由器插座的背景。 长答案：Angular CSS 伪选择器/修饰符 您可以使用 :host 修饰符影响托管组件。如果您想更改路由器出口样式，请将 css 添加到将托管的组件中。
如何编写代码，当我单击asp.net上的按钮时，会出现引导程序或消息框的警报消息？ protected void ButtonLogin_Click（对象发送者，EventArgs e） { //
我使用以下 HTML 代码： 1 2 我使用以下 HTML 代码： <div id="list"> <div class="row"> <div class="col-md-3">1</div> <div class="col-md-3">2</div> <div class="col-md-3">3</div> <div class="col-md-3">n-times</div> </div> </div> 所以，我需要在页面底部滚动并水平显示一行无限列。 我该怎么做？ 所以，我尝试为 width 容器设置固定 list 并设置了 overflow-x: auto 连续超过 12 个列单元是可以的。它会导致列换行，但您可以使用 Flexbox 覆盖换行。 Bootstrap 4使用flexbox和实用程序类来获得水平滚动布局.. <div class="container-fluid"> <div class="row flex-row flex-nowrap"> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> </div> </div> Bootstrap 4 演示： http://codeply.com/go/GoFQqQAFhN 另请参阅：Bootstrap 中水平滚动的卡片列表 对于 Bootstrap 3，可以使用一些 Flexbox 的 CSS 来完成。 . row > .col-xs-3 { display:flex; flex: 0 0 25%; max-width: 25% } .flex-nowrap { -webkit-flex-wrap: nowrap!important; -ms-flex-wrap: nowrap!important; flex-wrap: nowrap!important; } .flex-row { display:flex; -webkit-box-orient: horizontal!important; -webkit-box-direction: normal!important; -webkit-flex-direction: row!important; -ms-flex-direction: row!important; flex-direction: row!important; } Bootstrap 3 演示：http://codeply.com/go/P13J3LuBIM 另一种方式： CSS： #list .row {white-space:nowrap;} #list .row > div {display:inline-block;float:none;} 水平滚动的Js： window.addEventListener('mousewheel', function(e){ e.preventDefault(); var step = -100; if (e.wheelDelta < 0) { step *= -1; } var newPos = window.pageXOffset + step; $('body').scrollLeft(newPos); }) Bootply：https://www.bootply.com/pbenard/usmX12rxgP Carol 解决方案的 bootstrap 5 变体是 <div class="row overflow-x-auto flex-nowrap"> <!-- your cols here --> </div>
我需要在刷新从 AJAX 请求获取数据的表后立即从 Bootstrap 表获取数据。 table.bootstrapTable('刷新'); var data = table.bootstrapTable('getData'); ...
我正在尝试实现 Bootstrap 3 导航栏，以便品牌徽标始终保持在中间。这是代码： 我正在尝试实现 Bootstrap 3 导航栏，以便品牌徽标始终保持在中间。这是代码： <div class="navbar navbar-fixed-top navbar-default"> <div class="navbar-inner"> <div class="container"> <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" style="margin: 0; float: none;" href="#"> <img src="/Content/themes/next/images/logo.png" /></a> <div class="nav-collapse"> <ul class="nav"> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> </ul> </div> <ul class="nav pull-right"> <li> <a href="#"> <div class="nextCog"></div> </a> </li> </ul> <span class="navbar-text pull-right">superpup1 </span> </div> </div> </div> 它制作了一个漂亮的导航栏： 但是，我希望徽标（绿色）始终保留在中间。我将此样式添加到具有“品牌”类别的标签中： <a class="brand" style="margin: 0; float: none; text-align:center" href="#"> <img src="/Content/themes/next/images/logo.png" /> </a> 它部分解决了问题：徽标位于中间，但它将其余的导航栏元素向下推： 这是我想消除的不良影响。你能提出一个解决方案吗？也许从一开始就将徽标居中的方法是错误的？ 试试这个： .navbar { position: relative; } .brand { position: absolute; left: 50%; margin-left: -50px !important; /* 50% of your logo width */ display: block; } 将徽标居中 50% 并减去徽标宽度的一半，这样在放大和缩小时就不会出现问题。 参见小提琴 最简单的方法是css变换： .navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; } 演示：http://codepen.io/candid/pen/dGPZvR 这种方式也适用于徽标的动态大小背景图像，并允许我们利用文本隐藏类： CSS： .navbar-brand { background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat; transform: translateX(-50%); left: 50%; position: absolute; width: 200px; /* no height needed ... image will resize automagically */ } HTML： <a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text </a> 我们也可以使用 Flexbox。然而，使用这种方法我们必须将 navbar-brand 移到 navbar-header 之外。这种方式很棒，因为我们现在可以并排显示图像和文本： .brand-centered { display: flex; justify-content: center; position: absolute; width: 100%; left: 0; top: 0; } .navbar-brand { display: flex; align-items: center; } 演示：http://codepen.io/candid/pen/yeLZax 要仅在移动设备上实现这些结果，只需将上述 css 包装在媒体查询中： @media (max-width: 768px) { } Bootstrap 5（2022 年更新） 在 Bootstrap 5 中，mx-auto 或 flexbox justify-content-center 仍然可以用于将品牌和其他元素居中。 https://codeply.com/p/UKfeHAJQQC Bootstrap 4（2018 年更新） 在Bootstrap 4中，mx-auto或flexbox可用于将品牌和其他元素居中。有关说明，请参阅如何在 Bootstrap 中居中定位导航栏内容。 Bootstrap 3（原始答案） 看看这个例子是否有帮助：https://codeply.com/p/G71Uruhqwy 品牌以..为中心 .navbar-brand { position: absolute; width: 100%; left: 0; top: 0; text-align: center; margin: auto; } 您的标记适用于 Bootstrap 2，而不是 3。不再有 navbar-inner。 编辑 - 另一种方法是使用 transform: translateX(-50%); .navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; } https://codeply.com/p/3kkmEHtVGH 另请参阅： 引导导航栏左对齐、居中或右对齐项目 老问题，但仅供后代使用。 我发现最简单的方法是将图像作为导航栏品牌的背景图像。只需确保输入自定义宽度即可。 .navbar-brand { margin-left: auto; margin-right: auto; width: 150px; background-image: url('logo.png'); } <style> .navbar-brand { margin: auto; } </style> <!--HTML--> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="logo goes here" width="100" height="100" class="logo" alt="" loading="lazy"> </a> </nav> 徽标真正居中且链接合理的解决方案。 导航的最大推荐链接数为 6，具体取决于每个链接中单词的长度。 如果您有 5 个链接，请插入一个空链接并使用以下样式设置： class="hidden-xs" style="visibility: hidden;" 这样链接的数量总是偶数。 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <style> .navbar-nav > li { float: none; vertical-align: bottom; } #site-logo { position: relative; vertical-align: bottom; bottom: -35px; } #site-logo a { margin-top: -53px; } </style> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Nav</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav nav-justified navbar-nav center-block"> <li class="active"><a href="#">First Link</a></li> <li><a href="#">Second Link</a></li> <li><a href="#">Third Link</a></li> <li id="site-logo" class="hidden-xs"><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li> <li><a href="#">Fourth Link</a></li> <li><a href="#">Fifth Link</a></li> <li class="hidden-xs" style="visibility: hidden;"><a href="#">Sixth Link</a></li> </ul> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 要查看结果，请单击 run snippet，然后单击 full page 小提琴 由于它是一个 Flexbox（可能是由于 justify-content:space-between BT4 css 属性。），如果您添加第三个元素（名称和按钮的同级元素），它会自然地将代码中的第二个元素居中。 我只是在 a 之后添加 <span>login</span> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-sm navbar-light bg-light mt-5"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <span>login</span> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> 就我而言，徽标的高度很重要，因为它设置了标题的高度。 所以一个简单的技巧就是放两个标志。一个隐藏的将设置标题最小高度，这样徽标就不会被裁剪。另一个处于绝对位置，如Brian Willis 的回答。 JSFiddle HTML： <header class="bg-primary"> <nav class="navbar"> <p>Left-content</p> <a class="navbar-brand bg-secondary" href="/"> <img src="" alt="My-logo"> </a> <!-- The hidden logo set the header minimal height so the logo isn’t croped --> <img class="logo-hidden" src="" alt="My-logo"> <p>Some-right-content-that-is-a-bit-too-large</p> </nav> </header> CSS： .navbar-brand { transform: translateX(-50%); position: absolute; left: 50%; } .logo-hidden { visibility: hidden; } img { font-size: 4rem; }