Question

我尝试按照Boostrap docs在按钮上使用float-right，但是无法让4个按钮中的3个移至其所在div的右侧。我究竟做错了什么？

请注意，我希望Submit the form按钮保持原样。

无法访问jsfiddle的代码：

<div class="container">
    <div class="row mt-1 px-3">
        <div class="col-lg-12">
            <p>
            div above buttons
            </p>
        </div>
        <div class="col-lg-12">              
            <div class="btn-toolbar">
                <button type="submit" class="btn btn-success mr-1">Submit the form</button>
                <button type="button" id="SaveDraft" class="btn btn-outline-primary mr-1 float-right">Save Draft</button>
                <button type="button" id="RestoreDraft" class="btn btn-outline-warning mr-1 float-right" >Restore Draft</button>
                <button type="button" id="DeleteDraft" class="btn btn-outline-danger mr-1 float-right">Delete All Drafts</button>
            </div>
        </div>
    </div>
</div>

我还尝试将btn-toolbar更改为btn-group。

Answer 1

您遇到了问题，因为.btn-toolba使用display: flex;，您可以通过添加类并更改显示值来修改该行为并仅针对此div，如下所示：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-lg-12 {
  border: solid 1px #6c757d;
  padding: 10px;
}
 .test.btn-toolbar{
  display: block !important;
}

<head>
  <title>Parag Patel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  

</head>

<body>
<div class="container">
    <div class="row mt-1 px-3">
        <div class="col-lg-12">
            <p>
            div above buttons
            </p>
        </div>
        <div class="col-lg-12">
            <div class="test btn-toolbar ">
                <button type="submit" class="btn btn-primary mr-1">Submit the form</button>
                <button type="button" id="SaveDraft" class="btn   mr-1 float-right">Save Draft</button>
                <button type="button" id="RestoreDraft" class="btn btn-outline-warning mr-1 float-right" >Restore Draft</button>
                <button type="button" id="DeleteDraft" class="btn btn-outline-danger mr-1 float-right">Delete All Drafts</button>
            </div>
        </div>
    </div>
</div>

</body>

</html>

Answer 2

您可以执行以下操作：

<div class="container">
<div class="row mt-1 px-3">
    <div class="col-lg-12">
        <p>
        div above buttons
        </p>
    </div>
    <div class="col-lg-12">              
        <div class="btn-toolbar">
            <button type="submit" class="btn btn-success mr-1">Submit the form</button>
          <div style="margin-left: auto;">
            <button type="button" id="SaveDraft" class="btn btn-outline-primary mr-1 ">Save Draft</button>
            <button type="button" id="RestoreDraft" class="btn btn-outline-warning mr-1" >Restore Draft</button>
            <button type="button" id="DeleteDraft" class="btn btn-outline-danger mr-1 ">Delete All Drafts</button>
          </div>
        </div>
    </div>
</div>

引导按钮将不会向右移动

2 个答案: