Bootstrap ul li右侧的引导加载旋转器

epfja78i 于 2023-05-11 发布在 Bootstrap

关注(0)|答案(1)|浏览(135)

我试图将Bootstrap加载微调器放在ui li的右侧，并将文本“Keywords”放在ui li的左侧。
我有下面的html代码

<ul class="list-group" id="my-list">
   <li class="list-group-item active" aria-current="true">
      <div class="row">
         <div class="col float-left">Keywords</div>
         <div class="col spinner-border spinner-border-sm float-right" role="status">
            <span class="sr-only">Loading...</span>
         </div>
      </div>
   </li>
</ul>

微调器显示为两条旋转的线，而不是旋转的圆。

知道是什么问题吗

twitter-bootstrap

来源：https://stackoverflow.com/questions/76205011/bootstrap-loading-spinner-at-right-side-of-ul-li

1条答案

按热度按时间

eqzww0vc1#

.col的样式与spinner-border类冲突。将spinner作为子项移动到.col容器下可以正确加载微调器。
添加.visually-hidden以隐藏仅sr文本。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group" id="my-list">
   <li class="list-group-item active" aria-current="true">
      <div class="row">
         <div class="col float-left">Keywords</div>
         <div class="col float-right">
           <div class="spinner-border spinner-border-sm" role="status">
             <span class="sr-only visually-hidden">Loading...</span>
           </div>
         </div>
      </div>
   </li>
</ul>

[更新]

上述解决方案不能正确对准装载机。利用flexbox.d-flex与justify-content-end右对齐，与.align-items-center垂直对齐。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group" id="my-list">
  <li class="list-group-item active" aria-current="true">
    <div class="row">
      <div class="col-10">Keywords</div>
      
      <div class="col-2 d-flex align-items-center justify-content-end">
        <div class="spinner-border spinner-border-sm" role="status">
          <span class="sr-only visually-hidden">Loading...</span>
        </div>
      </div>
    </div>
  </li>
</ul>

赞(0）回复(0）举报 2023-05-11

我来回答

Bootstrap ul li右侧的引导加载旋转器

1条答案

相关问题

热门标签

最新问答