В настоящее время я работаю на "Quote Machine" как часть проектов freeCodeCamp. Я пытаюсь использовать список, чтобы получить три элемента списка, которые ведут себя как кнопки, один рядом с другим, используя встроенный класс загрузчика, однако он не работает, поскольку каждый из li занимает одну строку. Это мой код без CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random Quote Machine</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css"
integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>Random Quote Machine</h1>
<h5>WARNING: These quotes might inspire you</h5>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="quote-box">
<p id="quote">Test quote</p>
<p id="author">Anonimous</p>
</div>
<ul class="col-md-12 list-inline">
<li><a href="#" class="btn btn-default btn-lg tweet-quote"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="btn btn-default btn-lg facebook-quote"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="btn btn-default btn-lg get-quote"><i class="fas fa-quote-left"></i>Get Quote</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
И это результат в браузере:
Список не встроен в список
Заранее благодарен за любые отзывы