我有以下代碼：
<div class="container-fluid big-logo bg-light" id="big-logo">
<nav class="navbar nav-pills flex-column justify-content-center flex-sm-row navbar-expand-lg navbar-light bg-white">
<a href="{% url 'home' %}" class="nav-item">
<img alt="logo" src="{% static 'img/fuck.jpg' %}" style="max-height:40px;">
</a>
<a href="{% url 'cart' %}" class="nav-item">
<div>
<img alt="cart" class="card-title" src="{% static 'img/cart.png' %}" style="max-height:30px;">
<span class='badge badge-warning' id='lblCartCount'> {{ obj }} </span>
<h6 class="card-subtitle text-muted">Cart</h6>
</div>
</a>
</nav>
</div>
這是當前和預期結果的方式：
我嘗試了很多選擇，但無能為力。我該怎么做才能得到預期的結果？
uj5u.com熱心網友回復：
在錨標記上使用 andm-auto和ml-autoclass 將其右對齊。洗掉justify-content-center來自nav：
<div class="container-fluid big-logo bg-light" id="big-logo">
<nav class="navbar nav-pills flex-column flex-sm-row navbar-expand-lg navbar-light bg-white">
<a href="{% url 'home' %}" class="nav-item m-auto">
<img alt="logo" src="{% static 'img/fuck.jpg' %}" style="max-height:40px;">
</a>
<a href="{% url 'cart' %}" class="nav-item ml-auto">
<div>
<img alt="cart" class="card-title" src="{% static 'img/cart.png' %}" style="max-height:30px;">
<span class='badge badge-warning' id='lblCartCount'> {{ obj }} </span>
<h6 class="card-subtitle text-muted">Cart</h6>
</div>
</a>
</nav>
</div>
uj5u.com熱心網友回復：
使用mx-md-auto，示例導航欄：（在整頁上運行代碼）
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
<div class="container">
<div class="navbar-collapse collapse nav-content order-2">
<ul class="nav navbar-nav">
</ul>
</div>
<ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
<li class="nav-item"><a class="nav-link" href="#">Center</a></li>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</ul>
<div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
<ul class="ml-auto nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</div>
</div>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320876.html
標籤：html css 推特引导 bootstrap-4 蠢货