html - Bootstrap 4水平文本对齐不起作用
问题描述
我有以下代码:
<div class="card" >
<div class="card-block">
<h4 class="card-title">
<span class="text-left"></span>
<span class="text-right">Drago</span>
</h4>
<span class="card-text">
Location: ???<br>
District: ???<br>
Last updated: Tue, May 8th 2018
</span><br><br>
<div class="card-buttons" class="text-center">
<a href="#" class="btn btn-primary btn-sm"><i class="fas fa-user-cog"></i> Edit User</a>
<a href="#" class="btn btn-primary btn-sm"><i class="fas fa-home"></i> Manage Addresses</a>
<a href="#" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i> Delete</a>
</div>
</div>
</div>
我正在尝试在 Bootstrap 4 中制作一张卡片。
我确实希望 emoji 中的表情符号<h4>
左对齐,之后的文本右对齐。我正在尝试这样做:
<h4 class="card-title">
<span class="text-left"></span>
<span class="text-right">Drago</span>
</h4>
但这不起作用,我得到:
我也尝试在没有引导类的情况下做到这一点。使用style="text-align: left"
和style="text-align: right"
。然而,这似乎也不起作用。
当我使用<div>
水平对齐时,效果很好。只有将显示属性设置为 and 的<span>
and才会出现这个问题。<div>
inline-block
inline-flex
解决方案
你会使用,float-right
因为....card-title
display:block
<h4 class="card-title">
<span></span>
<span class="float-right">Drago</span>
</h4>
https://www.codeply.com/go/CMrl4JydKp
Usingtext-right
适用于内联元素的父级。
推荐阅读
- reactjs - 如何用 SCORM 和 React 计算总分?
- regex - AttributeError:“NoneType”对象没有属性“组”,组不返回无
- pytorch - PyTorch 在 M1 MacBook 上本地运行,但有些东西不能正常工作
- .net-core - 如何将新的 System.Windows.Forms.UserControl 添加到 .NET Core 3.1 项目而不会出错?
- django - 在 Django REST 框架上上传图像/图像
- github - 使用新的个人访问令牌的 git push 出错
- c++ - c++ 从 'char' 到 'const char*' 的无效转换 [-fpermissive]
- android - Android 应用程序已成功发布,但点击 URL 时不可见消息“很抱歉,在此服务器上找不到请求的 URL。”
- ruby-on-rails - Rails 捆绑安装在 gitlab ci/cd 中失败 - Gem::RemoteFetcher::UnknownHostError
- c++ - 这会被认为是 OOP 中的不良做法吗?