-1

我的 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>

最新图片 在此处输入图像描述

4

1 回答 1

1

问题是您正在使用流体行网格并为复选框提供流体跨度宽度：

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

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

当您调整窗口大小时，100% 的行流体会变小，并且在某个点上，它会达到大约 6.38% 不足以容纳复选框的全部内容的标记。

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

尝试span1从复选框 div 中删除，并添加以下 CSS：

.checkbox {
  float: left;
}

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

添加

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

于 2013-09-29T11:56:53.667 回答