div以较小的屏幕尺寸重叠

Question

我正在开发一个功能，每个字母应该在自己的框中，我正在尝试设计。框应该是一个接一个或多行，在它们之间有一个边距。它工作正常，直到我将屏幕尺寸更改为小（或在移动设备上测试），然后底行的字母与上一行的字母重叠。更改margin并未对较小屏幕中的每个框应用全方位边距。我尝试添加overflow:auto，但没有看到差异。如何将每个信箱与所需的边距分开而不重叠（即使在屏幕调整大小时元素需要间隔两行）？

我看到类似的问题已被问到before，但我不确定如何转移答案。

在视图中：

<div class="booyah-box col-xs-10 col-xs-offset-1">
  <h2 class="text-center">
    <% scrambled_word_array.each do |character| %>
      <div class="boxed-letter"><%= character %></div>
    <% end %>
  </h2>
</div>

相关的CSS：

.booyah-box {
  -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
  -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
  box-shadow: 1px 1px 2px 0 #d0d0d0;
  background: #fff;
  border: 1px solid #ccc;
  border-color: #e4e4e4 #bebebd #bebebd #e4e4e4;
  padding: 10px;
  font-family: "Lucida Grande", sans-serif;
}

.booyah-box .boxed-letter {
  display: inline;
  padding: 8px;
  margin: 2px;
  border: 1px solid black;
  border-radius: 5px;
  background: grey;
  font-family: "Courier New", Courier, monospace;
  color: white;
}

Answer 1

这有助于您

而不是display: inline使用display: inline-block

对我很好。

Answer 2

在display: inline-block;上尝试.boxed-letter，这应该为他们提供自己的空间并防止他们重叠