Bootstrap Tabs浮动图片右键

问题描述 投票:0回答:1

我有一个基本的 nav-tabs 在Twitter Bootstrap中,我在所有标签后有一个图片,我想把它浮动起来。我试过修改它的浮动、文本对齐和其他属性,甚至修改了 pull-right 类,在另一个相关的SO问题中也有提到。

<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来使我的图片向右浮动?

(Bootstrap 4,如果这很重要的话)

html css twitter-bootstrap bootstrap-4
1个回答
0
投票
<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>

0
投票

在图片周围放一个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>
© www.soinside.com 2019 - 2024. All rights reserved.