复选框标签以1024 x 768分辨率重叠

Question

我的JSP代码是

<h:field
  path="configuredChannels" 
  required="true" 
  code="admin.menu.channels">
    <div class="row-fluid" 
      data-channel-checkboxes="#">
        <form:checkboxes 
          element="div class='span1 checkbox'" 
          items="${channels}" 
          path="configuredChannels" />
    </div>
</h:field>

然而，复选框项目在所有其他分辨率下工作正常但项目频道值facebook仅与1024 X 768上的下一个复选框重叠。

这是jpeg图像。

以下是HTML中生成的客户端代码

          <div class="controls">
                <div class="row-fluid" data-channel-checkboxes="#">
 <div class='span1 checkbox'>
<input id="configuredChannels1" name="configuredChannels" type="checkbox" value="SMS"/><label for="configuredChannels1">SMS</label>
</div class='span1 checkbox'>
<div class='span1 checkbox'>
<input id="configuredChannels2" name="configuredChannels" type="checkbox" value="Voice"/><label for="configuredChannels2">Voice</label></div class='span1 checkbox'>
<div class='span1 checkbox'><input id="configuredChannels3" name="configuredChannels" type="checkbox" value="Facebook"/><label for="configuredChannels3">Facebook</label></div class='span1 checkbox'>
<div class='span1 checkbox'><input id="configuredChannels4" name="configuredChannels" type="checkbox" value="Twitter"/><label for="configuredChannels4">Twitter</label>
</div class='span1 checkbox'><input type="hidden" name="_configuredChannels" value="on"/></div>
<span class="help-inline">
                    </span>
           </div>
       </div>

最新图片

Answer 1

问题是你正在使用一个流畅的行网格，并给复选框一个流体跨度宽度：

<div class="row-fluid" data-channel-checkboxes="#">
 <div class='span1 checkbox'>

这意味着row-fluid始终是其容器宽度的100％（无论HTML的上下文中是什么，并且复选框div具有span1类，它始终是行流体宽度的6.382978723404255％。（这在Twitter Bootstrap中定义）

当您调整窗口大小时，100％的行 - 流体变得更小，并且在某一点上它会达到标记，其中~6.38％不足以适合复选框的全部内容。

在保持这种流体网格的同时没有简单的解决方案，它正在做它应该做的事情，但你可能并不打算这样做。一个更好的解决方案可能是不给复选框一个定义的宽度，只是让它们使用他们需要的所有宽度。

尝试从复选框div中删除span1，然后添加此CSS：

.checkbox {
  float: left;
}

这意味着它们将不具有以前均匀分布的宽度，但是一旦没有足够的空间在一行上显示所有宽度，复选框将在新行上继续。

除了

您正在设置div的结束标记上的类。那完全没用。只应在开始标记（<div>）上设置类（以及所有其他属性），而不应在</div>

上设置