引导选项卡将图像向右浮动答案

【问题标题】：Bootstrap Tabs Float Image Right引导选项卡将图像向右浮动
【发布时间】：2020-06-02 14:09:50
【问题描述】：

我在 Twitter Bootstrap 中有一个基本的nav-tabs，我在所有标签之后都有一个图像，我想向右浮动。我已经尝试修改它的 float、text-align 和其他属性，甚至是在一个单独但相关的 SO 问题中提到的 pull-right 类。

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
    <a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff" aria-selected="true">Stuff</a>
</li>
<!-- ... -->

<img class="pull-right text-right float-right" src="myimg.png" width="32px" height="32px">

我应该编写什么 Bootstrap 类或 CSS 以使图像向右浮动？

（如果重要，请使用引导程序 4）

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

<nav class="navbar header navbar-light bg-dark" id="myHeader">
<div class="container">
<p class="">logo</p>
// from here you get all elements on right side
<ul class="list-inline">
<li class="list-inline-item">
<div class="frqst">
<button class="fas fa-users btn text-white"></button>
<div>
<ul class="list-group">
<li class="border-bottom">
<p>first right item
</p>                   
</li>
</ul>
</div>
</div>
</li>
<li class="list-inline-item">
<button class="fas fa-comment btn text-white">second right item</button>
</li>
<li class="list-inline-item">
<p>third right item</p> 
</li>
<li class="list-inline-item"> 
<img src="../../myimg.jpg">
</li>
<li class="list-inline-item">
<a class="text-white" href="./models/logout.html">Logout</a>
</li>
</ul>
</div>
</nav>

【讨论】：

我如何让其余的浮动正确？使用<ul> 和list-inline 类？另外，XML/HTML cmets 是这样的： 谢谢你的快速回答

【解决方案2】：

在图像周围放置一个 div 标签并像这样使用 d-flex justify-content-end：

<div class="row">
    <div class="col-md-12">
        <div class="">
            <div class="">
                <ul class="nav nav-pills w-100">
                    <li class="nav-item">
                        <a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab"
                            aria-controls="stuff" aria-selected="true">Stuff</a>
                    </li>
                </ul>
            </div>
            <div class="d-flex justify-content-end">
                <img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/09/f46bc1a6-9ffa-4434-a77a-ea1491d3597a-760x400.jpeg"
                    class="">
            </div>
        </div>
    </div>
</div>

我对此进行了测试。应该可以。

另一个你可以试试：

<div class="col-md-12" style="border-top: 2px solid #000;">
    <div class="mx-4">
        <div class="footer pt-3">
            <div class="row">
                <div class="col-md-6">
                    <ul>
                        <li class="nav-item">
                            <a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff"
                                aria-selected="true">Stuff</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <div class="float-right">
                        <img class="pull-right text-right float-right" src="http://placekitten.com/301/301" width="32px" height="32px">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

好像不行，试了一下。感谢您的快速回答。
更新了我的答案。立即尝试。
感谢您花时间更新它。第一个不起作用，第二个将它分成我不想要的列。
只需从两者中删除 col-md-6。