我正在尝试将单选按钮显示为内联选项。
在 Bootstrap 4.1.1 文档中，示例代码是：
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
尽管我将其克隆到我的 html 中，但它不起作用并且单选按钮显示正常。
My Html代码是：
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'surveys/style.css' %}" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TFM Survey</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ STATIC_URL }}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="{{ STATIC_URL }}/static/bootstrap/js/bootstrap.js" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<form action="{% url 'surveys:vote' %}" method="post">
{% csrf_token %}
{% if questions %}
<ul class="list-group">
{% for question in questions %}
<li class="list-group-item list-group-item-dark">{{ question.question_text}}</li>
{% if question.choice_set.all %}
{% for choice in question.choice_set.all %}
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="{{ question.id }}" id="choice{{ forloop.counter }}" value="{{ choice.choice_text }}">
<label class="form-check-label" for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label>
</div>
{% endfor %}
{% else %}
<input type="text" class="form-control" placeholder="Type some answer..." name="{{ question.id }}"/>
{% endif %}
{% endfor %}
</ul>
{% else %}
<p>No questions are available.</p>
{% endif %}
<input type="submit" class="btn btn-primary" value="Vote" />
</form>
</div>
</body>
</html>
我也尝试使用class="checkbox-inline"但它也不起作用。
我已经看到div倾向于使用所有宽度，所以我还指定：
#radio-div{
width:auto
}
但两者都不起作用（我在无线电输入中使用了 id 语句）。
有人知道这个实现中是否存在明显的错误吗？
在这里，你的<ul> <li>元素无效。
这意味着a内部只能有多个<li>元素。<ul>应该只包含li元素。
您的代码示例：在这里，您将单选按钮元素放在<li>元素。
<ul class="list-group">
<li class="list-group-item list-group-item-dark">YOUR TEXT CONTENT</li>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
</ul>
更正的代码示例：您需要将单选按钮元素代码放入其中<li>元素。
<ul class="list-group">
<li class="list-group-item list-group-item-dark">YOUR TEXT CONTENT
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
</li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
