Question

我减少了bootstrap v4中的导航栏大小。它运作良好，但问题很少。有人可以帮助我解决这个关键问题。至少第二个是非常重要的修复。

1，在切换（在小屏幕中）时，背景颜色会丢失。

2，导航栏和后续的身体元素之间有很多空间，无法缩小空间。

<style>
    .navbar-nav > li > a {padding-top:8px !important; padding-bottom:1px !important;}
    .navbar input {height:25px !important; font-size:12px !important;width:400px; }
    input {font-size:12px !important;}
    .navbar {min-height:15px !important; max-height:28px !important}
    body{font-size:12px !important;font-family:}



</style>

HTML代码：

        <!-- Bootstrap core 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">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Custom styles for this template <link href="https://v4-alpha.getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">-->
    <link href="/static/smapy/starter.css" rel="stylesheet">

<!-- for admin widget 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script> -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script type="text/javascript" src="/static/smapy/main.js"></script> 




<style>
    .navbar-nav > li > a {padding-top:8px !important; padding-bottom:1px !important;}
    .navbar input {height:25px !important; font-size:12px !important;width:400px; }
    input {font-size:12px !important;}
    .navbar {min-height:15px !important; max-height:28px !important}
    body{font-size:12px !important;font-family:}



</style>

<script>
function showHint(str) {
    if (str.length == 6) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                console.log(this.responseText);
            }
        };
        xmlhttp.open("GET", "/sm/search/?q=" + str, true);
        xmlhttp.send();
    }
}

(function(){

  $("#cart").on("click", function() {
    $(".shopping-cart").fadeToggle( "fast");
  });

})();
</script> 


  </head>

  <body>
      <nav class="navbar navbar-toggleable-sm navbar-light fixed-top" style="background-color: #e3f2fd;" >
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="container">
            <a class="navbar-brand" href="/">
            <img src="/static/image/smlogo.png" width="140" height="26" class="d-inline-block align-top" alt="">

            </a>    
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">

        </ul>
   <ul class="navbar-nav">

      <li class="dropdown" style="padding-right:13px;"  >
          <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> 
          <span class="fa fa-shopping-cart fa-1x"></span> Cart <span class="cartcount" id="cart_count">0</span></a>
          <ul class="dropdown-menu dropdown-cart" role="menu">
            <!--  <li >
                  <span class="item">
                    <span class="item-left">
                        <img src="http://www.prepbootstrap.com/Content/images/template/menucartdropdown/item_1.jpg" alt="" />
                        <span class="item-info">
                            <span>Item name</span>
                            <span>price: 27$</span>
                        </span>
                    </span>
                    <span class="item-right">
                        <button class="btn btn-danger  fa fa-close"></button>
                    </span>
                </span>
              </li>  -->   
          </ul>
       </li> 


        <form method="get" action="/search/" class="form-inline my-2 my-lg-0">
          <input name="q" id="id_q" value="" class="form-control mr-sm-0" type="text" placeholder="pin code or Shop Name to search" onkeyup="showHint(this.value)">
          <!-- <button class="btn btn-sm btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
        </form>


            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">esakki</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Profile</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="/accounts/logout/">Logout</a>
            </div>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="/vendor/">Shopowner? Register here.</a>
          </li>



         </ul>
      </div>
      </div>
    </nav>

<style>
.breadcrumb li{
display: inline;

}
</style> 







<div class="container">


<div class="col-sm-8 col-md-9"> 
<h3>shopmapy welcomes you!</h3>

    <p>Your Neighbourhood Shopping Destination. </p>
 <div class="container">
       <br>



 Django!! </div>

Bootstrap v4减少导航栏大小的影响

0 个答案: