Question

我正在尝试将单选按钮显示为内联选项。在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语句）。有没有人在这个实现中有一些明显的错误？

Answer 1

此处，您的<ul> <li>元素无效。这意味着在一个内部只能有多个<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>

Answer 2

您需要关注Bootstrap标记和classes才能实现此目标

首先，您需要添加custom-control和custom-radio类 form-check-inline
在custom-control-input

input

在custom-control-label

label

＆＃13;

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

/* just to make inline radio, You can remove this if you want */
.custom-control {
  display: inline-block !important;
}

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />

<div class="custom-control custom-radio form-check form-check-inline">

  <input class="custom-control-input form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="custom-control-label form-check-label" for="inlineRadio1">1</label>

</div>

<div class="custom-control custom-radio form-check form-check-inline">
  <input class="custom-control-input form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="custom-control-label form-check-label" for="inlineRadio2">2</label>
</div>


<div class="custom-control custom-radio form-check form-check-inline">
  <input class="custom-control-input form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="custom-control-label form-check-label" for="inlineRadio3">3 (disabled)</label>

</div>

＆＃13;

Answer 3

您在链接标记中添加了bootstrap.js，请将其更改为

<script src="{{ STATIC_URL }}/static/bootstrap/js/bootstrap.js"></script>

另外请注意，首先必须要求jquery，比如

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="{{ STATIC_URL }}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="{{ STATIC_URL }}/static/bootstrap/js/bootstrap.js"></script>

如果问题仍然存在，添加课程radio-inline而不是form-check form-check-inline，就像这样

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    <div class="radio-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="radio-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="radio-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>

＆＃13;

Bootstrap 4.1.1表单检查表单 - 检查 - 在线单选按钮

3 个答案: