Bootstrap 右对齐未按预期工作答案

【问题标题】：Bootstrap right alignment not working as expectedBootstrap 右对齐未按预期工作
【发布时间】：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>

【问题讨论】：

标签： bootstrap-4

【解决方案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>

【讨论】：