【发布时间】：2018-06-12 19:34:05
【问题描述】：
我正在尝试将单选按钮显示为内联选项。 在 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 中，但它不起作用并且单选按钮显示正常。
我的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 语句）。 如果这个实现中有一些明显的错误，有人吗？
【问题讨论】：
标签： html css twitter-bootstrap bootstrap-4