Bootstrap 右对齐未按预期工作
Posted
技术标签:
【中文标题】Bootstrap 右对齐未按预期工作【英文标题】：Bootstrap right alignment not working as expected 【发布时间】：2022-01-21 19:39:14 【问题描述】：引导程序 4： 我有一个带有标签和图标的卡片标题，我希望标签左对齐，图标右对齐，但图标始终附加在标签上。为什么它不像我预期的那样工作？ 将 col-8 添加到 h6 并将 col-4 添加到 div 类时，从图标到右边框仍然有很大的空间。
这是我的代码：
<div class="card-header" style="margin:unset;padding:unset">
<div class="row" style="margin:unset">
<h6 class="mt-1">@list.Name</h6>
<div class="text-right">
<span>
<i class="fas fa-file-import"></i>
</span>
</div>
</div>
</div>
【问题讨论】：
【参考方案1】：我建议您使用<div> 而不是<h6>，因为<h6> 标签将在浏览器中具有默认的边距值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="card-header" style="margin:unset;padding:unset">
<div class="row" style="margin:unset">
<div class="">@list.Name</div>
<div class="text-right">
<span>
<i class="fas fa-file-import"></i>
</span>
</div>
</div>
</div>
</body>
</html>附：如果将 col-8 添加到 h6 并将 col-4 添加到 div 类，也会应用默认引导程序的填充。将 p-0 类添加到两个 div 以取消这些填充。
【讨论】：
【参考方案2】：您必须使用 class='col' 在单独的 div 中添加 h6 和图标等每个元素
请看下面的例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="card-header" style="margin:unset;padding:unset">
<div class="row" style="margin:unset">
<div class="col">
<h6 class="mt-1">@list.Name</h6>
</div>
<div class="col text-right">
<span>
<i class="fas fa-file-import"></i>
</span>
</div>
</div>
</div>
</body>
</html>【讨论】：
以上是关于Bootstrap 右对齐未按预期工作的主要内容，如果未能解决你的问题，请参考以下文章