twitter-bootstrap 更改 boostrap 中复选框的大小

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/39221886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:15:27  来源:igfitidea点击:

change size of checkbox in boostrap

cssasp.net-mvctwitter-bootstrap

提问by SavantCode

I try to change the size of a checkbox in bootstrap. I try it like this:

我尝试更改引导程序中复选框的大小。我像这样尝试:

css:

css:

   .big-checkbox {width: 100px; height: 100px;}

HTML bootstrap:

HTML 引导程序:

  <label class="big-checkbox">
            <input type="checkbox" name="optradio">Reeks
        </label>

@section scripts{
    <link href="@Url.Content("~/Content/Stickerprinter.css")" rel="stylesheet" type="text/css" />

    }

But I dont see changing the size.

但我没有看到改变大小。

采纳答案by Div

Try like this :

像这样尝试:

  .big-checkbox  > input {width: 100px; height: 100px;}

回答by Germano Plebani

Using width and height you can't change the dimensions of an input checkbox. In this way change the area of click but checkbox remain the same. You can use this:

使用宽度和高度不能更改输入复选框的尺寸。通过这种方式更改单击区域但复选框保持不变。你可以使用这个:

input[type=checkbox] {
  transform: scale(1.5);
}

Check the difference: https://jsfiddle.net/88v0gq20/

检查差异:https: //jsfiddle.net/88v0gq20/

You can use for bootstrap this plugin: http://plugins.krajee.com/checkbox-x/demo

您可以使用此插件进行引导:http: //plugins.krajee.com/checkbox-x/demo

Or you could create custom checkbox like in this tutorial: https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes

或者您可以像本教程中一样创建自定义复选框:https: //kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes