html - 按钮在 react 中不合理

Question

这是我卡住的代码图片

我想要的是显示为对齐的按钮

我能够获得如下图所示的按钮，但这在我的 react 代码中不起作用

我的代码没有按预期工作

 <div className="hidden-xs buttons col-lg-12 col-md-12">
                    <button>Kartonnen brillen</button>
                    <button>Kartonnen brillen</button>
                    <button>Kartonnen brillen</button>

                    <button>Kartonnen brillen</button>
                    <div className="stretch-spacing-buttons"></div>
                    <button>Kartonnen brillen</button>
                    <button>Kartonnen brillen</button>
                    <button>Kartonnen brillen</button>

                    <button>Kartonnen brillen</button>
                    <button>Kartonnen brillen</button>
                    <div className="stretch-spacing-buttons"></div>

                </div>

CSS

.buttons {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.stretch-spacing-buttons {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

Answer 1

试试这个: HTML:

<div class="buttons">
  <div class="first-row">
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
  </div>
  <div class="second-row">
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
     <button>Kartonnen brillen</button>
  </div>
 </div>

CSS:

.first-row {
  display:grid;
  grid-template-columns:repeat(4, auto);
  justify-content: space-between;
}
.second-row{
  display:grid;
  grid-template-columns:repeat(5, auto);
  justify-content: space-between;
}

您可以在这里找到 Codepen:https://codepen.io/sphr1313/pen/BOpWVg