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

Question

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

我该如何解决它。

这是示例代码。

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

Answer 1

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

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

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

第二种方法是，只需从 bootstrap 中复制粘贴代码作为复选框，然后在代码中添加 runat ="server"，如下所示：-

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

上面的代码将把 html 视为 asp.net 服务器代码。