使用w3.css在项目之间添加空格

Question

我正在尝试制作一组按钮，但在尝试此操作时，按钮之间没有间隙。

<div className="w3-row">
            <div className="w3-col w3-right-align">
              <button className="w3-btn w3-blue w3-padding w3-round" onClick={this.previewImage} >Preview</button>
              <button className="w3-btn w3-green w3-padding w3-round" href="#" to="#">Generate PDF</button>
              <button className="w3-btn w3-red w3-padding w3-round" href="#" to="#">Delete</button>
              <button className="w3-btn w3-green w3-padding w3-round" href="#" to="#">Save</button>
              <Link className="w3-btn w3-blue w3-padding w3-round" href="#" to="#">Cancel</Link>
            </div>
          </div>

这会将按钮放下来，但没有任何间隙。我真的不想在取消按钮的右边有空隙，因为它与屏幕右侧的框对齐得很好。我真的只想要每个按钮之间的空隙。使用w3.css/可以做到这一点吗？

​

正确的方式是在每个按钮之间有一些填充，并将它们放在一起？

我以为w3-padding属性会起作用，但正如您所见-它不起作用。

Answer 1

只需再添加一个类“w3-margin left”

Answer 2

我不知道w3.js，但这是一个与常规css类似的效果，对我来说，一旦你通过了flexbox的初始学习曲线，打字似乎就少了很多，而且只花了一两分钟就实现了。

​

.btn-group {
  display: flex;
  justify-content: flex-end;
}

.btn {
  margin-left: 5px;
  padding: 5px;
  border-radius: 5px;
}

.primary {
  background: cornflowerblue;
}

.danger {
  background: red;
}

.action {
  background: green;
}

<div class="btn-group">
  <button class=" btn primary">Preview</button>
  <button class="btn action">Generate PDF</button>
  <button class="btn danger">
Delete
</button>
  <button class="btn action">
Save
</button>
  <button class="btn primary">
Cancel
</button>
</div>

​

Answer 3

请改用margin。填充在里面，边距在外面。在这种情况下，我建议尝试一下flexbox，并使用justify-content: space-between来实现均匀分布和流动的内容。