如何为Bootstrap按钮添加间距？按钮同行排列问题求助

嘿，我来帮你拆解下遇到的两个问题，以及对应的解决办法：

问题根源 #

1. 按钮无法同行排列 #

你把按钮拆分到了两个独立的w3-show-inline-block容器里，而每个容器内部的w3-bar默认是块级元素（会撑满父容器的宽度），这就导致每个外层容器被内部的w3-bar占满了宽度，两个容器自然没法挤在同一行，只能换行显示。

2. 按钮之间没有间距 #

btn-success这个类默认没有设置外边距（margin），再加上你代码里的按钮是紧密写在一起的，inline/inline-block元素之间的空白也被消除了，所以按钮就会紧紧挨在一起，没有任何空隙。

最简洁的修复代码 #

把所有按钮放到同一个w3-bar容器里（w3-bar本身就是用来做横向排列的容器，默认是flex布局），同时给按钮加上间距样式——你可以用Bootstrap的me-2类（表示margin-right: 0.5rem），或者W3.CSS的w3-margin-right类，效果都一样：

<div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="btn btn-success me-2" onClick={() => this._filterByYear('2006')}>2006</button>
    <button class="btn btn-success me-2" onClick={() => this._filterByYear('2007')}>2007</button>
    <button class="btn btn-success me-2" onClick={() => this._filterByYear('2008')}>2008</button>
    <button class="btn btn-success" onClick={() => this._filterByYear('2009')}>2009</button>
  </div>
</div>

特殊场景的备选方案 #

如果因为业务需求必须保留两个外层容器，那你需要修改w3-bar的显示方式为inline-flex（让它不会撑满父容器），同时给按钮加上间距：

<div class="w3-show-inline-block">
  <div class="w3-bar" style="display: inline-flex;">
    <button class="btn btn-success me-2" onClick={() => this._filterByYear('2006')}>2006</button>
    <button class="btn btn-success" onClick={() => this._filterByYear('2007')}>2007</button>
  </div>
</div>
<div class="w3-show-inline-block">
  <div class="w3-bar" style="display: inline-flex;">
    <button class="btn btn-success me-2" onClick={() => this._filterByYear('2008')}>2008</button>
    <button class="btn btn-success" onClick={() => this._filterByYear('2009')}>2009</button>
  </div>
</div>

不过还是第一种方案更符合w3-bar的设计初衷，代码也更简洁易维护～

内容的提问来源于stack exchange，提问作者shreyas singh