我的导航选项卡向左对齐，但我希望她的搜索栏和徽标（svg）与导航选项卡的右侧对齐。我尝试使用 text-align:right 和 float:right 但这不起作用。这可能是因为我使用了 bootstrap，我该怎么做？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sloppy music</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-12">
<ul class="nav nav-tabs">
<li class="nav-item"> <a class="nav-link active" href="#">Artists</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Playlists</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link " href="#">Contact</a> </li>
<li><input type="text" placeholder="Type text">
<button type="button" class="btn btn-primary">Search</button>
</li>
<li><img src="images/sloppy.svg" class="img-fluid" width="50" id="logo"></li>
</ul>
</div></div>
</div>
</body>
</html>
我尝试使用 text-align: right 和 float: right 但这不起作用。
您可以尝试证明内容的合理性。我相信你的容器必须设置为弯曲。这是一些关于它的文档。如果不起作用请告诉我们。我还在自学中
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content