如何使用HTML和CSS在一行上均勻地拆分按鈕？

Question

在我的HTML代碼中，我試圖在模式內創建幾個按鈕。 我為此使用Bootstrap。 在頁腳部分中，我試圖將這些按鈕在模式（或模式頁腳）的寬度之間平均分配。

我可能使用Bootstrap列來實現這一點，但是為此目的，填充（包含.col-*類的元素之間）可能有點太大。 我可以分配一個寬度，但這不會在可用空間量之間平均分配元素。

這是我到目前為止嘗試過的：

 $(document).ready(function() { $(".modal").modal(); }); 

 .foo { /* Hardcoded width, how could I make it that when adding buttons, width is split among amount of buttons? */ float: left; width: 30%; margin: 0 5px; } .bar { /* Not working to center the buttons: */ margin: 0 auto; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>&hellip;</p> </div> <div class="modal-footer"> <!-- Content with three evenly spread/divided buttons on a single line --> <div class="bar"> <div class="foo"> <button type="button" class="btn btn-default btn-block">Button 1</button> </div> <div class="foo"> <button type="button" class="btn btn-default btn-block">Button 2</button> </div> <div class="foo"> <button type="button" class="btn btn-default btn-block">Button 3</button> </div> </div> <!-- End of content --> </div> </div> </div> </div> 

的jsfiddle

將寬度設置為30％顯然並不總是會使按鈕均勻分裂（例如，如果我添加另一個按鈕，按鈕將不再均勻分布）。 還要注意，按鈕有些偏向左側。 我希望按鈕隨着模式的大小（即響應性）而增長。 在Modal頁腳內的單行上拆分/展開按鈕的最佳方法是什么？

Answer 1

在bar div上添加display: flex並添加flex: 1 0 auto; 在兒童divs上

則您不需要30％的寬度。

.bar {
  display: flex;
}

.bar > div {
  flex: 1 0 auto;
}

 $(document).ready(function() { $(".modal").modal(); }); 

 .foo { margin: 0 5px; } .bar { display: flex; } .bar>div { flex: 1 0 auto; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>&hellip;</p> </div> <div class="modal-footer"> <!-- Content with three evenly spread/divided buttons on a single line --> <div class="bar"> <div class="foo"> <button type="button" class="btn btn-default btn-block">Button 1</button> </div> <div class="foo"> <button type="button" class="btn btn-default btn-block">Button 2</button> </div> <div class="foo"> <button type="button" class="btn btn-default btn-block">Button 3</button> </div> </div> <!-- End of content --> </div> </div> </div> </div> 

更新了jsfiddle

Answer 2

您可以使用此引導程序：

    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Button 1</button>

      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Button 2</button>

      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">Button 3</button>
      </div>
    </div>

我想添加另一個按鈕即可。

    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Button 1</button>

      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Button 2</button>

      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">Button 3</button>
      </div>
      <div class="btn-group" role="group" aria-label="Fourth group">
        <button type="button" class="btn btn-secondary">Button 4</button>
      </div>
    </div>