div在较小的屏幕尺寸中重叠

Question

我正在开发一个功能，其中每个字母都应放在自己的盒子中，这是我正在尝试设置的样式。 框应彼此相邻或多行，无论哪种情况，框之间都应留有空白。 它可以正常工作，直到我将屏幕尺寸更改为小尺寸（或在移动设备上对其进行测试），然后最下面一行的字母与上一行的字母重叠。 更改页margin不会将较小的边框应用于所有框。 我尝试添加overflow:auto但没有发现任何区别。 如何将每个字母框与所需的边距分隔而又不重叠（即使在调整屏幕大小时元素需要分成两行）？

我看到以前有人问过类似的问题，但是我不确定如何传递答案。

在视图中：

<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 ，应该给他们自己的空间，并防止它们重叠