使用引导程序设置按钮

Question

我正在尝试在avsluta按钮之后设置一个redigera按钮

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4"></div>
    <div class="col-md-4">
        <button class="form-control" style="width:80px;height:50px;" type="button">Avsluta</button>
        <button class="form-control" style="width:90px; height:50px;" type="button">Redigera</button>
    </div>
</div>

为什么在avsluta按钮之后没有设置我的redigera按钮

我在尝试什么

首先我给空格4，然后是4，然后是4，但是avsluta按钮设置在下面的行

我再次给空格4，然后3，然后2，但是avsluta按钮设置在下面的行

但不行

我正在对引导程序进行错误的分区或我给了太多空间

参考：

Answer 1

在包含按钮的div中添加“ d-flex flex-row”。

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4"></div>
    <div class="col-md-4 d-flex flex-row">       
            <button class="form-control" style="width:80px;height:50px;" type="button">Avsluta</button>
            <button class="form-control" style="width:90px; height:50px;" type="button">Redigera</button>
    </div>
</div>

Answer 2

只需为按钮添加btn类。默认情况下，所有html元素都是block元素。这将显示一整行用于显示元素。添加btn类将使按钮成为inline-block元素。这将允许在同一行中包含多个元素。

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-4">
  </div>
  <div class="col-md-4"></div>
  <div class="col-md-4">
    <button class="form-control btn btn-primary" style="width:80px;height:50px;" type="button">Avsluta</button>
    <button class="form-control btn btn-primary" style="width:90px; height:50px;" type="button">Redigera</button>
  </div>
</div>