Я пытаюсь создать тест, но у меня возникают проблемы с bootstrap 4.
Я пытаюсь настроить параметры (Пантеры, Боевой Ири sh, Медведи, Тигры) для всех одинаковой длины.
Я пытался добавить col-sm-8 на все классы, но безуспешно. Я попытался нацелиться на классы без удачи.
Может кто-нибудь указать, что я делаю неправильно.
Спасибо,
a {
color: white;
list-style: none;
}
a:visited {
color:white;
}
body{
font-family: arial;
font-size: 15px;
line-height: 1.6em;
background: rgb(202, 202, 202);
}
li {
list-style: none;
}
.container{
width: 70%;
margin: 20px auto;
overflow: auto;
}
.pull-left{float:left;}
.pull-right{float:right;}
header {
background: blue;
color: white;
padding: 5px 10px;
overflow: auto;
font-size: 16px;
}
footer {
background: blue;
color: white;
padding: 5px 10px;
overflow: auto;
font-size: 15px;
}
.optionName{
}
.optionText{
}
@media only screen and (max-width: 900px) {
.container{
width: 90%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>College Football Quiz</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<header>
<div class="pull-left"><a href="index.html">College Mascot Quiz</a></div>
<div class="pull-right">by Rob Connoly</div>
</header>
<div class="main">
<form class="questionForm" id="question1" data-question="1">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Question 1</h5>
<p class="card-text">University of Notre Dame.</p>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<label> <input class="optionName" name="question1" type="radio" aria-label="Panthers" value=
'a'> Panthers
</label>
</div>
</div>
</div>
<div class="input-group-prepend">
<div class="input-group-text col-xs-6">
<label> <input class="col-xs-3 optionName" name="question1" type="radio" aria-label="FightingIrish" value="b"> Fighting Irish
</label>
</div>
</div>
<div class="input-group-prepend">
<div class="input-group-text col-xs-6 ">
<label> <input class="optionName" name="question1" type="radio" aria-label="bears" value="c"> Bears
</label>
</div>
</div>
<div class="col-xs-6 input-group-prepend">
<div class="input-group-text col-xs-6">
<label> <input class="optionName" name="question1" type="radio" aria-label="Tigers" value="d"> Tigers
</label>
</div>
</div>
</div>
<button id="submit" class="btn btn-primary">Submit</a>
</div>
</div>
</form>
<!-- <h3>1. University of Notre Dame</h3>
<ul>
<li><input type="radio" name="question1" value="a" /> Panthers </li>
<li><input type="radio" name="question1" value="b" /> Fighting Irish </li>
<li><input type="radio" name="question1" value="c" /> Bears </li>
<li><input type="radio" name="question1" value="d" /> Tigers </li>
</ul>
<button id='submit'>Submit</button>
</form> -->
<!-- <form class="questionForm" id="question2" data-question="2">
<h3>2. University of Southern California</h3>
<ul>
<li><input type="radio" name="question2" value="a" /> Trojans </li>
<li><input type="radio" name="question2" value="b" /> Aztecs </li>
<li><input type="radio" name="question2" value="c" /> Bobcats </li>
<li><input type="radio" name="question2" value="d" /> Boomer </li>
</ul>
<button id='submit'>Submit</button>
</form>
<form class="questionForm" id="question3" data-question="3">
<h3>3. University of California</h3>
<ul>
<li><input type="radio" name="question3" value="a" /> Prowlers </li>
<li><input type="radio" name="question3" value="b" /> Scarlets </li>
<li><input type="radio" name="question3" value="c" /> Golden Bears </li>
<li><input type="radio" name="question3" value="d" /> Ducks </li>
</ul>
<button id='submit'>Submit</button>
</form>
<form class="questionForm" id="question4" data-question="4">
<h3>4. Clemson University</h3>
<ul>
<li><input type="radio" name="question4" value="a" /> Zippy </li>
<li><input type="radio" name="question4" value="b" /> Hokies </li>
<li><input type="radio" name="question4" value="c" /> Rebels </li>
<li><input type="radio" name="question4" value="d" /> Tigers </li>
</ul>
<button id='submit'>Submit</button>
</form>
<form class="questionForm" id="question5" data-question="5">
<h3>5. University of New Mexico</h3>
<ul>
<li><input type="radio" name="question5" value="a" /> Cavaliers </li>
<li><input type="radio" name="question5" value="b" /> Lobos </li>
<li><input type="radio" name="question5" value="c" /> Gamecocks </li>
<li><input type="radio" name="question5" value="d" /> Devils </li>
</ul>
<button id='submit'>Submit</button>
</form>
<form class="questionForm" id="question6" data-question="6">
<h3>6. University of Nebraska</h3>
<ul>
<li><input type="radio" name="question6" value="a" /> Gophers </li>
<li><input type="radio" name="question6" value="b" /> Fighting Hawks </li>
<li><input type="radio" name="question6" value="c" /> Comets </li>
<li><input type="radio" name="question6" value="d" /> Cornhuskers </li>
</ul>
<button id='submit'>Submit</button>
</form>
<form class="questionForm" id="question7" data-question="7">
<h3>7. Austin Peay University</h3>
<ul>
<li><input type="radio" name="question7" value="a" /> Highlanders </li>
<li><input type="radio" name="question7" value="b" /> Governors </li>
<li><input type="radio" name="question7" value="c" /> Jets </li>
<li><input type="radio" name="question7" value="d" /> Lynx </li>
</ul>
<button id='submit'>Submit</button>
</form>
<form class="questionForm" id="question8" data-question="8">
<h3>8. Stanford University</h3>
<ul>
<li><input type="radio" name="question8" value="a" /> Captians </li>
<li><input type="radio" name="question8" value="b" /> Cardinals </li>
<li><input type="radio" name="question8" value="c" /> Gladiators </li>
<li><input type="radio" name="question8" value="d" /> Hillcats </li>
</ul>
<button id='submit'>Submit</button>
</form>
<form class="questionForm" id="question9" data-question="9">
<h3>9. University of Indiana</h3>
<ul>
<li><input type="radio" name="question9" value="a" /> Horned Frogs </li>
<li><input type="radio" name="question9" value="b" /> Engineers </li>
<li><input type="radio" name="question9" value="c" /> Coyotes </li>
<li><input type="radio" name="question9" value="d" /> Hoosiers </li>
</ul>
<button id='submit'>Submit</button>
</form>
<form class="questionForm" id="question10" data-question="10">
<h3>10. University of Georgetown</h3>
<ul>
<li><input type="radio" name="question10" value="a" /> Gold Diggers </li>
<li><input type="radio" name="question10" value="b" /> Knights </li>
<li><input type="radio" name="question10" value="c" /> Ice Dogs </li>
<li><input type="radio" name="question10" value="d" /> Hoyas </li>
</ul>
<button id='submit'>Submit</button>
</form>
-->
<div id="results"></div>
<br>
<footer>
<div class="pull-left">
Total: 10 Questions
</div>
<div id="stopWatch" class="pull-right">
0
</div>
</footer>
</div>
</body>
</html>