Html 无法使Bootstrap4列表内联以相互放置元素_Html_Bootstrap 4

Html 无法使Bootstrap4列表内联以相互放置元素

html bootstrap-4

Html 无法使Bootstrap4列表内联以相互放置元素,html,bootstrap-4,Html,Bootstrap 4,作为freeCodeCamp项目的一部分，我目前在一个“报价机”中工作。我试图使用一个列表来获取三个列表项，它们作为按钮，通过使用引导类“in-line”一个挨着一个，但是它不起作用，因为每个li占用一行。这是我迄今为止没有CSS的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Random Quote Machine&l

作为freeCodeCamp项目的一部分，我目前在一个“报价机”中工作。我试图使用一个列表来获取三个列表项，它们作为按钮，通过使用引导类“in-line”一个挨着一个，但是它不起作用，因为每个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>


随机报价机
随机报价机
警告：这些引语可能会激励你

测试报价
无名氏

这是浏览器中的结果：

提前感谢您的任何反馈

您需要关于项目的

列表内联项目

类

<div class="col-md-12">
      <ul class="list-inline">
           <li class="list-inline-item"><a href="#" class="btn btn-default btn-lg tweet-quote"><i class="fab fa-twitter"></i></a></li>
           <li class="list-inline-item"><a href="#" class="btn btn-default btn-lg facebook-quote"><i class="fab fa-facebook-f"></i></a></li>
           <li class="list-inline-item"><a href="#" class="btn btn-default btn-lg get-quote"><i class="fas fa-quote-left"></i>Get Quote</a></li>
      </ul>
</div>

此外，UL应进入

col-md-12

内。请参阅。

碰巧我遵循了YT教程，并且在每个li中没有内联类的情况下，它工作得很好。提供的链接以及代码层澄清了问题，Tyvm@ZimSystem