引導4將品牌和鏈接

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <style type="text/css"> 
 

 
    </style> 
 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded container" style="background-color: #FFFFFF"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
     </button> 
 
    <a class="navbar-brand" href="#"> 
 
     <img src="http://via.placeholder.com/84x100" class="d-inline-block align-top" alt=""> 
 
     <h1>Navbar</h1> 
 
    </a> 
 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
 
     <div class="navbar-nav"> 
 
     <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Features</a> 
 
     <a class="nav-item nav-link" href="#">Pricing</a> 
 
     <a class="nav-item nav-link disabled" href="#">Disabled</a> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     <h2>Heading</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper 
 
      porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

我與引導4個工作，並試圖建立品牌爲高大的形象和文字的下方。我希望將圖像放在文本的頂部，並且都要輸入。有沒有內置的方式來使用bootstrap來做到這一點，或者它需要自定義的CSS？大多數這是從引導網站拉，但我沒有標誌居中。導航欄和品牌上的鏈接也沒有對齊在底部。

來源

2017-08-02 perlnoob

align-self-center and d-flex？ https://codepen.io/anon/pen/aymWOV –

添加align-self-end到#navbarNavAltMarkup不起作用，但將切換導航欄從左向右切換。任何方式來對齊品牌和導航鏈接，但保持左邊的togle導航欄？ – perlnoob

引導程序有一個類「文本中心」，應該按照您的需要工作。在您的示例中，將其應用於類爲「navbar-brand」的元素。

來源

2017-08-02 23:18:46

引導4將品牌和鏈接

回答

相關問題