如何使用 HTML 和 CSS 将按钮均匀地拆分在一行上？

Posted 2023-05-08

【中文标题】如何使用 HTML 和 CSS 将按钮均匀地拆分在一行上？

【英文标题】：How could I evenly split up buttons on a single line using HTML and CSS?

【发布时间】：2019-09-01 22:31:21

【问题描述】：

在我的 html 代码中，我试图在模态框内创建几个按钮。我为此使用引导程序。在页脚部分，我试图在模态（或模态页脚）的宽度之间平均分配这些按钮。

我可以使用 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 的页脚中拆分/展开单行按钮的最佳方式是什么？

【参考方案1】：

在 bar div 上添加 display: flex 并在子 div 上添加 flex: 1 0 auto;

那么你就不需要 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

【讨论】：

除了你宁愿使用div而不是给定foo类，这正是我想要的。

是的，你可以使用 .foo 来代替 div :)

【参考方案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>

【讨论】：

请给我一个实现这段代码的例子。当我尝试自己实现this 时，我只能看到浮动在模态左侧的按钮。

老板在你的页面中使用这个代码，如果你有链接引导，你会看到结果

你可以通过这个链接获得帮助：getbootstrap.com/docs/4.3/components/button-groupCooooooool

如果您查看我的问题中的代码，您会注意到我没有使用 Bootstrap 4。我也没有在寻找按钮组。按钮组不是用于分页问题（而不是任何可以使用的默认按钮）？我无法使用上述功能（称为btn-toolbar）。