css - 使用 Bootstrap 设置样式时,单选按钮不显示选中状态
问题描述
当我只使用一组带有 Bootstrap 且没有特殊样式的普通单选按钮时,它就可以正常工作:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="radio">
<div class="form-group">
<label><input type="radio" value="keep">Ändra inte lösenordet</label>
</div>
<div class="form-group">
<label><input type="radio" value="auto">Generera ett nytt lösenord automatiskt</label>
</div>
<div class="form-group">
<label><input type="radio" value="manual">Ange ett nytt lösenord manuellt</label>
</div>
<div class="form-group">
<input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
单击时,单选按钮显示选中状态。但是,如果我尝试使用这样的custom-control
CSS 类来设置按钮的样式:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="radio custom-control custom-radio">
<div class="form-group">
<label class="custom-control-label"><input type="radio" class="custom-control-input" value="keep">Ändra inte lösenordet</label>
</div>
<div class="form-group">
<label class="custom-control-label"><input type="radio" class="custom-control-input" value="auto">Generera ett nytt lösenord automatiskt</label>
</div>
<div class="form-group">
<label class="custom-control-label"><input type="radio" class="custom-control-input" value="manual">Ange ett nytt lösenord manuellt</label>
</div>
<div class="form-group">
<input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
... 这没用。当我单击按钮时没有任何反应。我怎样才能解决这个问题?
解决方案
现在工作。您只需要id="customRadio"
在输入和标签中添加 a for="customRadio"
。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="radio custom-control custom-radio">
<div class="form-group">
<input type="radio" class="custom-control-input" id="customRadio"><label class="custom-control-label" for="customRadio">Ändra inte lösenordet</label>
</div>
<div class="form-group">
<input type="radio" id="customRadio1" class="custom-control-input" value="auto"><label class="custom-control-label" for="customRadio1">Generera ett nytt lösenord automatiskt</label>
</div>
<div class="form-group">
<input type="radio" id="customRadio2" class="custom-control-input" value="manual" > <label class="custom-control-label" for="customRadio2">Ange ett nytt lösenord manuellt</label>
</div>
<div class="form-group">
<input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
</div>
</div>
推荐阅读
- c# - 如何从字符串中检索主机
- vim - vscodevim - 查找字符 - 逗号重映射
- odata - OData:按键获取实体但没有实体集名称
- regex - 如何检测文本中的特定子词
- react-native - 即使应用程序处于后台或关闭状态,如何使用 react-native 应用程序?
- elasticsearch - ElasticSearch:如何根据字段中的位置对匹配项进行排序
- ios - 是否可以从 iOS 上的 inappbrowser/webview 访问相机
- php - ftp_nlist() 有时不返回路径
- javascript - 当输入字段中的文本发生更改时,我应该使用什么用户输入来触发功能?
- intellij-idea - Intellij 保存多个实例的工作区设置