gpt4 book ai didi

html - 在 Bootstrap 中垂直对齐左右元素

转载 作者:太空宇宙 更新时间:2023-11-04 02:07:28 24 4
gpt4 key购买 nike

我使用的是 Bootstrap 3.3.7,我想知道如何显示:

  • 页眉元素 h1page-header 左侧对齐
  • button 元素与 page-header 右侧对齐
  • 两个元素在同一基线上

当前代码粘贴在下面,工作示例在 JSFiddle 上.我的问题类似于 this问题,但建议的解决方案对我不起作用。

<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<div class="pull-left">
<h1>Hello World <small>Home Page</small></h1>
</div>
<div class="pull-right">
<button class="btn btn-primary">Submit</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>

最佳答案

你的问题出在 CSS,而不是标记

您提供的 fiddle 按预期工作,元素似乎没有正确对齐的原因是因为 Bootstrap 在 h1 元素上设置了默认边距,而 按钮

解决这个问题最简单的方法是添加

h1 {
margin: 0;
}

到您网站的 CSS。

或者以“自举”方式获得类似的输出,您可以查看 bootstrap navbarsbranded bootstrap navbars .

关于html - 在 Bootstrap 中垂直对齐左右元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40448711/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com