我有一个基本的 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,如果这很重要的话)
<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>
在图片周围放一个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>