Question

我目前正在使用报价机＆＃34;作为freeCodeCamp项目的一部分。我试图使用一个列表来获得三个列表项作为按钮，一个使用引导类＆＃34; in-line＆＃34;然而它没有工作，因为每个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>

这是浏览器中的结果：

list-inline not rendering

提前感谢您提供任何反馈

Answer 1

您需要项目的list-inline-item课程......

<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>

https://www.codeply.com/go/uzJ5wlWfr0

此外，UL应该进入col-md-12。请参阅Bootstrap Documentation。

无法使用Bootstrap4 list-inline来相互放置元素

1 个答案: