如何在两个 bootstrap 按钮之间制作 space

Question

你可以看到下面的代码我试图在同一行中创建两个按钮但是它不起作用我想在此代码中在同一行中创建两个按钮

 <div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="btn btn-success"  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">
    <button class="btn btn-success"  onClick={() => this._filterByYear('2008')}>2008</button>
    <button class="btn btn-success"  onClick={() => this._filterByYear('2009')}>2009</button>

在此处的演示代码中，为什么我想要的两个按钮之间没有 space https://ibb.co/rFD6knk

Demo

Answer 1

添加这个 CSS :

button {
    margin-left: 10px;
    margin-top: 10px;
    background: white;
    padding: 10px 20px;
    border: none;
}

这里 margin-left 会给你两个之间的 space ，我在这里添加了更多的样式选项，这将帮助你。

margin-left和margin-top给space，background改变按钮的背景，padding里面加space按钮，并且 border 摆脱了默认边框。

Answer 2

这些样式都可以。

.w3-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  padding: 5px 0;
}

.w3-btn {
  max-width: fit-content;
}

nav {
  max-width: 200px;
}

img {
  width: 100%;
}

~~Codepen~~

Answer 3

这是一个很好的解决方案。只需将其粘贴到您的 css:

.w3-bar {
    display: flex; 
    justify-content: space-between;
}

如何在两个 bootstrap 按钮之间制作 space

how to make space between two bootstrap button

html

css

bootstrap-4

w3.css