如何在引导程序中将同一行中的 svg 图标和文本内容对齐到右侧（右对齐）

Posted 2023-03-05

【中文标题】如何在引导程序中将同一行中的 svg 图标和文本内容对齐到右侧（右对齐）

【英文标题】：How to align svg icon and text content in same line towards right side (Right aligned) in bootstrap

【发布时间】：2021-11-21 14:13:09

【问题描述】：

我尝试将图标和文本向右对齐。但它没有发生。我附上设计。

我尝试了下面的代码 - 如果有任何可用选项，请告诉我。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="col-1 icon1">
  <svg xmlns="http://www.w3.org/2000/svg"   fill="#2DB757" class="bi bi-circle-fill float-right" style="margin: 18px;">
    <circle cx="8" cy="8" r="8"/>
  </svg>

  <div class="p-2" id="numOfStatus">Completed</div>
</div>

【问题讨论】：

欢迎。请编辑您的帖子和 sn-p 以更好地展示问题。似乎没有足够的标记来查看它。你需要一行和一个带有 Bootstrap 的容器。

【参考方案1】：

您可以使用 flexbox 将元素向右移动

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
   <div class="row">
      <div class="col-12 icon1">
         <div class="d-flex justify-content-end align-items-center">
            <svg xmlns="http://www.w3.org/2000/svg"   fill="orange" class="bi bi-circle-fill">
               <circle cx="8" cy="8" r="8"/>
            </svg>
            <div class="p-2" id="numOfStatus">Not Started</div>
             <svg xmlns="http://www.w3.org/2000/svg"   fill="red" class="bi bi-circle-fill">
               <circle cx="8" cy="8" r="8"/>
            </svg>
            <div class="p-2" id="numOfStatus">Progress</div>
             <svg xmlns="http://www.w3.org/2000/svg"   fill="#2DB757" class="bi bi-circle-fill">
               <circle cx="8" cy="8" r="8"/>
            </svg>
            <div class="p-2" id="numOfStatus">Completed</div>
         </div>
      </div>
   </div>
</div>

【讨论】：

这确实有效！谢谢@alaksandar-jesus-gene ..

【参考方案2】：

在您努力改进问题的同时，我会猜测您可能需要什么。通过在行上放置一个 flexbox 类并添加一个空的 flex 列，我们将固定宽度的小列推到右侧。

请注意，Bootstrap 4 的正确列类是 col-xs-1。确保您遵循正确的版本文档。

.col 
  background: pink;


.col-xs-1 
  background: #ddd;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row d-flex">
    <div class="col"></div>
    <div class="col-xs-1 icon1">
      <svg xmlns="http://www.w3.org/2000/svg"   fill="#2DB757" class="bi bi-circle-fill float-right" style="margin: 18px;">
                <circle cx="8" cy="8" r="8"/>
              </svg>
      <div class="p-2" id="numOfStatus">Completed</div>
    </div>
  </div>
</div>

要使布局更现代、更灵活，请仅使用 flex 类（包括在图标容器上）：

.d-flex > div 
  background: pink;


.d-flex > div:last-child 
  background: #ddd;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="d-flex">
    <div class="flex-grow-1"></div>
    
    <div class="icon1 d-flex">
      <svg xmlns="http://www.w3.org/2000/svg"   fill="#2DB757" class="bi bi-circle-fill float-right" style="margin: 18px;">
        <circle cx="8" cy="8" r="8"/>
      </svg>
      
      <div class="p-2" id="numOfStatus">Completed</div>
    </div>
  </div>
</div>