如何正确使用 asp.net 复选框组件中的 bootstrap 3 复选框属性？

Posted 2023-03-06

【中文标题】如何正确使用 asp.net 复选框组件中的 bootstrap 3 复选框属性？

【英文标题】：How to use bootstrap 3 checkbox property in asp.net checkbox component properly?

【发布时间】：2018-05-21 15:54:07

【问题描述】：

我在 asp.net 中使用 bootstrap 3 并使用复选框类，但它显示了额外的填充或边距 Like this。

我该如何解决它。

这是示例代码。

<div class="checkbox">
   <asp:CheckBox ID="CheckBox1" Text="I accept terms and conditions" runat="server" /> 
</div>

【参考方案1】：

这对我有用：

<div class="form-check col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <asp:CheckBox ID="CheckBox1" runat="server" Text="I accept terms and conditions" Checked="false" />
</div>

【参考方案2】：

当您使用 asp.net 服务器端复选框时，它有自己的样式。为了使您的代码保持原样，并且您只想使复选框的布局完美，那么您需要编写额外的 css 来覆盖Bootstrap css。下面是使用 css 解决问题的代码：-

复选框的引导代码：- .checkbox input[type=checkbox] margin-left: -20px;

自定义代码以使复选框出现在文本或标签附近 .checkbox input[type=checkbox] margin-left: 0px; // 使用左边距来调整复选框输入。

第二种方法是只需从引导程序复制粘贴代码以获取复选框，然后在代码中添加 runat ="server"，如下所示：-

<div class="checkbox">
    <label>
      <input type="checkbox" id="chkbox1" runat="server"> I accept terms and conditions
    </label>
  </div>

以上代码会将html视为asp.net服务器代码。