如何正确地在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>

- user8951186

Answer 1

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

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

自定义代码以使复选框靠近文本或标签 .checkbox input[type=checkbox] {margin-left: 0px; // 调整margin-left以调整复选框输入。}

第二种方法是只需从Bootstrap中复制粘贴复选框代码，并在代码中添加runat ="server"，如下所示：

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

上述代码将把HTML视为ASP.NET服务器代码。

- nimish

Answer 2

这对我有效：

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

- Raul Breindembach