Question

我正在尝试将按钮放在导航栏的右侧，但没有任何更改。的 See Demo

有用的代码：

.money_right {
  float: right
}

<nav class="navbar navbar-expand-lg bg-blue fixed-top">
  <span style="color: white;"><b>GUEST</b></span>&nbsp;
     <span class="money_right">
        <button class="money_bronze"><b>0</b></button>&nbsp;
        <button class="money_silver"><b>0</b></button>&nbsp;
        <button class="money_gold"><b>0</b></button>&nbsp;
        <button class="gems"><b>0</b></button>&nbsp;
    </span>
</nav>

我尝试在 JS Fiddle 进行演示，但有些CSS未在那里实施，所以这是我的 Working Demo

Answer 1

尝试添加属性dir =“rtl”

<html>
<head>
</head>
<body>
<nav dir="rtl" class="navbar navbar-expand-lg bg-blue fixed-top">
  <span style="color: white;"><b>GUEST</b></span>&nbsp;
     <span class="money_right">
        <button class="money_bronze"><b>0</b></button>&nbsp;
        <button class="money_silver"><b>0</b></button>&nbsp;
        <button class="money_gold"><b>0</b></button>&nbsp;
        <button class="gems"><b>0</b></button>&nbsp;
    </span>
</nav>
</body>
</html>

Answer 2

您需要删除version: '3' services: worker: image: dockersamples/examplevotingapp_worker deploy: mode: global

从您的代码中删除导航代码中的.money_right { float: right }类。

"navbar-expand-lg"

你已经完成了。

Answer 3

这个答案基于Bootstrap 4 - 我之所以提到这一点，只是因为您的问题中的代码是针对Bootstrap 4格式化的，但是您链接的小提琴依赖于Bootstrap 3。

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<nav class="navbar bg-primary text-white">
  <div class="navbar-brand font-weight-bold">GUEST</div>
  <div class="ml-auto">
    <button class="money_bronze font-weight-bold">0</button>
    <button class="money_silver font-weight-bold">0</button>
    <button class="money_gold font-weight-bold">0</button>
    <button class="gems font-weight-bold">0</button>
  </div>
</nav>

＆＃13;

虽然我已经编辑了您的整体代码，但更多地依赖于内置实用程序类的Bootstrap 4，但真正的关键是ml-auto。这会在flexbox显示方法中将内容推送到Bootstrap 4中的右侧 - 没有麻烦float！

由于<button>默认为inline-block自动创建空白区域，因此我们也删除了 ，因为它们是多余的。为了获得更多空间或更高精度，我强烈建议您使用mx-*实用程序类。

跨度在HTML，CSS中

3 个答案: