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

时间:2017-12-07 14:03:15

标签: css asp.net twitter-bootstrap-3

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

我该如何解决?

这是示例代码。

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

2 个答案:

答案 0 :(得分:2)

当您使用asp.net服务器端复选框时,它有自己的样式。为了使您的代码成为它,只是您想要使复选框的布局完美,那么您需要编写额外的css,这将覆盖Bootstrap css.Below是使用css解决问题的代码: -

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

自定义代码,以便使复选框显示在文本或标签附近     .checkbox输入[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服务器代码。

答案 1 :(得分: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>