当我居中Navbar时，文字变得挤压

时间：2017-12-27 21:49:19

标签： html css django twitter-bootstrap

我希望我的导航栏能够居中并始终显示在屏幕顶部，但是每当我认为我已经修复了它，那么这次文本文本就会出现问题。我希望它能够跨越。有时当我试图修复它时，＆＃34; Home＆＃34;按钮和图像重叠。谢谢。

How it looks centered

How I would like it to look, but not centered

＆＃13;
＆＃13; 
<!doctype html>
<html lang="en">

<head>

    <title>The Benjamin Project | Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/assets/css/animate.css">
    <link rel="icon" href="/static/assets/img/favicon.ico"> <!-- site icon -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/static/assets/script.js"></script>

    <style>

    @font-face {
      font-family: Panton;
      src:url("/static/assets/font/Panton-LightCaps.otf");
    }
    body {
      margin: 0;
      padding: 0;
      background-color: #8CD28C;
      overflow-x: hidden;
      min-height:75px;
      line-height:75px;
    }
    .navbar {
      margin: 0;
      border-radius: 0;
      background-color: #8CD28C; /*bg color for tabs on navbar*/
      color: #606060; /*text color for tabs on navbar*/
      padding: 50px 0px 50px 0px;
      font-size: 2em;
      font-family:Panton;
      border: 0;
      animation-duration: 1.5s;
    }
    .navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav .active a:hover {
      color: #606060; /*text color for active*/
      background-color: #8CD28C; /*bg color for active*/
      font-weight: bold;


    }
    .selected {
     text-decoration-line:underline;


    }
    .navbar .navbar-brand img {
      border-radius: 360%; /*rounds image*/
      margin-top: -55px;
      margin-right: 10px;

    }

    .navbar-default .navbar-nav li a {
      color: #606060; /*non active colors*/
      font-weight: bold;
    }
    .navbar-default .navbar-nav li a:hover {
      color: #606060; /*color of text being hovered over*/
      background-color: inherit;
      text-decoration: underline;
    }
    .row {
       margin-top: 3%;
       padding-left: 20%;
       padding-right: 20%;
       animation-duration: 2s;
        }
    .row hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 2px solid #606060;
      border-radius: 100%;
      margin: 1em 0;
      padding: 0;
    }
    .center{
      width:50%;
      max-width:960px;
      margin:0 auto;
    }

  </style>
</head>




  <body>
    <nav class="navbar navbar-default fadeInDown animated navbar-static-top center">
      <div class="container-fluid">
        <div class="navbar-header navbar-left">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <!-- navigation button on mobile -->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="https://imgur.com/k8SlOAa.png" allign="middle" width="125" height="125"></a> <!-- benjamin logo  alt="Benjamin Logo"-->
        </div>
        <div class="collapse navbar-collapse navbar-left center" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active selected"><a href="/">Home</a></li> <!-- labels on navigation bar -->
            <li><a href="/commands">Commands & Info</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/home/views/benjamins.html">Benjamins</a></li>
            <li><a href="/account/login">Login</a></li>
          </ul>
        </div>
      </div>

  </nav>
  <script type="text/javascript" src="/static/assets/script.js"></script>

  <page class="main">

  <div class="row fadeIn animated"><hr></div>

  </page>




</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

让nav看起来像链接图片的问题是

.center{
  width:50%;
  max-width:960px;
  margin:0 auto;
}

如果删除它可以正常工作。您可以展开以全屏查看或在此处查看https://codepen.io/anon/pen/zpZGwZ。

body {
  margin: 0;
  padding: 0;
  background-color: #8CD28C !important;
  overflow-x: hidden;
}

.navbar {
  margin: 0;
  border-radius: 0;
  background-color: #8CD28C !important;
  /*bg color for tabs on navbar*/
  color: #606060;
  /*text color for tabs on navbar*/
  padding: 50px 0;
  margin: 0;
  font-size: 1.5em;
  font-family: Panton;
  border: 0 !important;
  animation-duration: 1.5s;
}

.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:focus,
.navbar-default .navbar-nav .active a:hover {
  color: #606060;
  /*text color for active*/
  background-color: #8CD28C;
  /*bg color for active*/
  font-weight: bold;
}

.selected {
  text-decoration-line: underline;
}

.navbar .navbar-brand img {
  border-radius: 360%;
  margin-top: -55px;
  margin-right: 10px;
}

.navbar-default .navbar-nav li a {
  color: #606060;
  /*non active colors*/
  font-weight: bold;
  font-size: 14px;

}

.navbar-default .navbar-nav li a:hover {
  color: #606060;
  /*color of text being hovered over*/
  background-color: inherit;
  text-decoration: underline;
}

.page-padding {
  padding: 0 10%;
}

@media (min-width: 992px) {
  .page-padding {
    padding: 0 13%;
  }
  .navbar-default .navbar-nav li a {
    color: #606060;
    font-weight: bold;
    font-size: 20px;
}
}

.page-content hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 2px solid #606060;
  border-radius: 100%;
  margin: 1em 0;
  padding: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html>
<body>
  <div class="page-padding">
    <nav class="navbar navbar-default">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="https://i.imgur.com/k8SlOAa.png" width="125" height="125"></a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active selected"><a href="/">Home</a></li>
          <li><a href="/commands">Commands & Info</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/home/views/benjamins.html">Benjamins</a></li>
          <li><a href="/account/login">Login</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </nav>

    <page class="main">
      <div class="page-content fadeIn animated">
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac felis facilisis, pellentesque mauris at, accumsan diam. Ut aliquet eros a quam consequat bibendum. Donec lacinia odio aliquet, rutrum magna sit amet, mollis tortor. Nunc in viverra
          libero. Phasellus eget tellus eget lorem mollis sodales. Fusce sem eros, molestie eu turpis sed, tempus finibus ipsum. Donec consectetur lectus ac dui gravida, nec tristique eros semper. Proin in vestibulum eros, ut ullamcorper purus. Proin
          tincidunt neque urna, non placerat mi tincidunt id. Nulla eros tellus, feugiat tincidunt ex quis, laoreet interdum elit. Morbi dapibus, lacus id viverra posuere, arcu nulla aliquet mi, eu sollicitudin quam massa sed justo. Suspendisse vel lobortis
          nibh, non convallis quam.</p>
        <hr>
      </div>
    </page>
  </div>
</body>
</html>

相关问题
最新问题