试图将许多单选按钮显示为列 - 获得奇怪的输出

Question

JSFiddle here.

我有一个包含许多单选按钮的div。我想要一种方法：在一列中只显示4个单选按钮，之后接下来的4个单选按钮显示在下一列中，依此类推......

从我的SO搜索中，我发现了这种方式from this question：

.mdl-radio {
  display: block;
  margin: 15px auto;
}

.mdl-radio,
.choose-message-caption {
  margin: 25px;
}

.radiobuttons-container {
  height: 100vh;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

label.mdl-radio {
  display: inline-block;
}

<div class="radiobuttons-container">

  <label for="sacha" class="mdl-radio mdl-js-radio">
    <input id="sendAuthenticationInfo" class="mdl-radio__button" type="radio" name="map-message" value="sacha" /> 
    <span class="mdl-radio__label">Sacha</span>
</label>

  <label for="bob" class="mdl-radio mdl-js-radio">
    <input id="bob" class="mdl-radio__button" type="radio" name="map-message" value="bob" />
    <span class="mdl-radio__label">Bob</span>
</label>

  <label for="marley" class="mdl-radio mdl-js-radio">
    <input id="marley" class="mdl-radio__button" type="radio" name="map-message" value="marley" />
    <span class="mdl-radio__label">Marley</span>
</label>

  <label for="canny" class="mdl-radio mdl-js-radio">
    <input id="canny" class="mdl-radio__button" type="radio" name="map-message" value="canny" />
    <span class="mdl-radio__label">Canny</span>
</label>

  <label for="amy" class="mdl-radio mdl-js-radio">
    <input id="amy" class="mdl-radio__button" type="radio" name="map-message" value="amy" />
    <span class="mdl-radio__label">Amy</span>
</label>

  <label for="popye" class="mdl-radio mdl-js-radio">
    <input id="popye" class="mdl-radio__button" type="radio" name="map-message" value="popye" />
    <span class="mdl-radio__label">Popye</span>
</label>

  <label for="insider" class="mdl-radio mdl-js-radio">
    <input id="insider" class="mdl-radio__button" type="radio" name="map-message" value="insider" />
    <span class="mdl-radio__label">Insider</span>
</label>

  <label for="dogma" class="mdl-radio mdl-js-radio">
    <input id="dogma" class="mdl-radio__button" type="radio" name="map-message" value="dogma" />
    <span class="mdl-radio__label">Dogma</span>
</label>

  <label for="rowdy" class="mdl-radio mdl-js-radio">
    <input id="rowdy" class="mdl-radio__button" type="radio" name="map-message" value="rowdy" />
    <span class="mdl-radio__label">Rowdy</span>
</label>

  <label for="albumin" class="mdl-radio mdl-js-radio">
    <input id="albumin" class="mdl-radio__button" type="radio" name="map-message" value="albumin" />
    <span class="mdl-radio__label">Albumin</span>
</label>

  <label for="donna" class="mdl-radio mdl-js-radio">
    <input id="donna" class="mdl-radio__button" type="radio" name="map-message" value="donna" />
    <span class="mdl-radio__label">Donna</span>
</label>

  <label for="eli" class="mdl-radio mdl-js-radio">
    <input id="eli" class="mdl-radio__button" type="radio" name="map-message" value="eli" />
    <span class="mdl-radio__label">Eli</span>
</label>

  <label for="rose" class="mdl-radio mdl-js-radio">
    <input id="rose" class="mdl-radio__button" type="radio" name="map-message" value="rose" />
    <span class="mdl-radio__label">Rose</span>
</label>

</div>
<!-- .radiobuttons-container -->

问题在于，当我拖动JSFiddle输出面板的左边缘来改变其宽度时，输出会以奇怪的方式显示在多个列中。

当我在我的XAMPP localhost中编写测试程序时，输出这个很奇怪：

那么问题的解决方案是什么。

Answer 1

Check this fiddle

的可见性

您只需指定一列中的项目数。

.radiobuttons-container {
    height:100vh;
    -webkit-column-count: 4;
    -moz-column-count:4;
    column-count: 4;
}