亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

我的導航欄 img 不支持 bootstrap 中留下的浮動

我的導航欄 img 不支持 bootstrap 中留下的浮動

慕婉清6462132 2023-10-30 20:48:06
我編寫了一個導航欄并使用引導程序來使用此代碼<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=divice-width ,intial-scale=1"><title>complete bootstrap 4 website layout</title><link rel="stylesheet" href="css/bootstrap.css"><script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/popper.min.js"></script><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous"></head><body><!--navigation--><nav class="navbar navbar-expand-md navbar-light bg-light sticky-top"><div class="container-fluid">    <a href="" class="navbar-brand float-left"><img src="img/mehrlogo.png" alt=""></a></div></nav></body></html>我想將我的徽標設置在瀏覽器左側，但這不會有什么問題
查看完整描述

4 回答

?
料青山看我應如是

TA貢獻1772條經驗 獲得超8個贊

引導程序4

請注意，Bootstrap4 文檔將div標簽與float類一起使用。 https://getbootstrap.com/docs/4.0/utilities/float/

它不適用于a標簽。

Bootstrap 小于 4

<a href="" class="navbar-brand float-left">

我注意到您float-left在錨標記中添加了一個類。據我所知，Bootstrap 中沒有類float-left.

您可以簡單地定義自己的類。

<style>

.float-left {

  float:left;

}

</style>

希望您覺得它有幫助:)


查看完整回答
反對 回復 2023-10-30
?
UYOU

TA貢獻1878條經驗 獲得超4個贊

這是一個不好的做法，因為在導航欄下.container-fluid不使用，因為這是一個容器，我們必須在其中放置一些其他類row col等


<!--navigation-->

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">

<div class="container-fluid">

    <a href="" class="navbar-brand float-left"><img src="img/mehrlogo.png" alt=""></a>

</div>

</nav>

好的做法是簡單地使用 bootstrap 導航欄，它可以從互聯網上的許多資源中獲得，下面給出的簡單導航欄示例，在bootstrap.min.css文件中，有許多 css 類只需調用類名即可在您的項目中使用。


如果您使用此代碼，則無需設置向左浮動和向右浮動，只需使用帶有 img 標簽的導航欄品牌下的徽標


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" ></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarNav">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Features</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Pricing</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled</a>

      </li>

    </ul>

  </div>

</nav>


查看完整回答
反對 回復 2023-10-30
?
慕運維8079593

TA貢獻1876條經驗 獲得超5個贊

我們認為您的徽標是i 標簽；添加這個類 <i class="mr-auto"></i> 如果你的標志不是i 標簽，你也可以使用這段代碼；像img、div等標簽。



查看完整回答
反對 回復 2023-10-30
?
守著星空守著你

TA貢獻1799條經驗 獲得超8個贊

你可以使用列表來做到這一點，它非常像


<!doctype html>

<html>

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">

<ul class="mr-auto mb-0 pl-0">

    <a href="" class="navbar-brand"><img src="https://res.cloudinary.com/nalabdou/image/upload/v1585057140/user.png" style="width:35px;height:35px"/></a>

</ul>

</nav>


    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </body>

</html>


查看完整回答
反對 回復 2023-10-30
  • 4 回答
  • 0 關注
  • 158 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號