Bootstrap 4.1.1 радио-кнопка проверки формы - PullRequest
Новая
       1

Bootstrap 4.1.1 радио-кнопка проверки формы

0 голосов
/ 12 июня 2018

Я пытаюсь отобразить переключатель в качестве встроенного параметра.В документации по 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 на радиовходе).Кто-нибудь, если есть какая-то явная ошибка в этой реализации?

Ответы [ 3 ]

0 голосов
/ 12 июня 2018

Здесь, Ваш <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>
0 голосов
/ 12 июня 2018

Вы добавили 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, например 

    <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>
0 голосов
/ 12 июня 2018

Вам нужно следовать Bootstrap разметке и classes, чтобы достичь этого

  • Во-первых, вам нужно добавить custom-control и custom-radio классы с form-check-inline
  • Добавить custom-control-input класс в input
  • Добавить custom-control-label класс в label

.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;
}
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...