Antworten zum Thema „Bootstrap Nav Dropdown Problem“

AdioRockt · 30.08.2016

Hallo,
ich habe in Problem mit dem Dropdown meiner Nav.

Wie zu sehen ist, wird eine Scrollbar unter den Buttons angezeigt und der Abstand nach links wird nicht dargestellt.

HTML:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="lorem">
        <meta name="keywords" content="lorem">
        <meta name="author" content="lorem">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/custom.css" rel="stylesheet">
    </head>
    <body>
      <nav class="navbar navbar-default" style="border-radius: 0px;">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- logo -->
            <a class="navbar-brand" href="#">
              <img alt="Titel" height="24" src="img/logo.svg">
            </a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="#">Lorem</a></li>
              <li><a href="#">Lorem</a></li>
              <li><a href="#">Lorem</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <form class="navbar-form navbar-left" role="search">
                <button type="button" class="btn btn-default btn-sm">Registrieren</button>
                <button type="button" class="btn btn-default btn-sm">Login</button>
              </form>
            </ul>
          </div>
        </div>


    <!-- javascript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
</html>

CSS:

body{
  font-family: 'Lato', sans-serif;
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
}


/* navbar */

.navbar-default{
  border: none;
  background-color: #363533;
}

.navbar-default .navbar-nav>li>a{
  color: #C4BBBC;
}

.navbar-default .navbar-nav>li>a:hover{
  color: #DCDCDC;
}

.navbar-default .navbar-nav>.active>a{
  background-color: #363533;
  color: #DCDCDC;
}

.navbar-default .navbar-toggle{
  border: none;
}

.navbar-default .navbar-toggle:hover{
  background-color: #363533;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #968f90;
}

.navbar-default .navbar-toggle:hover .icon-bar{
  background-color: #C4BBBC;
}

.navbar-collapse {
  border: none;
}

.navbar-nav>li>a{
  padding-top: 20px;
  padding-bottom: 20px;
}

@media screen and (max-width: 768px){
    .navbar-nav>li>a{
      padding-top: 10px;
      padding-bottom: 10px;
    }
}

.navbar-brand{
  padding: 18px 15px;
}

@media screen and (max-width: 768px){
    .navbar-brand{
        padding: 14px 15px;
    }
}

.navbar-btn.btn-sm{
  margin-top: 14px;
}


/*@media ?*/
.navbar-default .navbar-nav>li>a:hover {
  background-color: #3a3937;
}

Hoffe ihr könnt mir bei meinem Problem helfen

Chris_EDI · 31.08.2016

Ich habe es schnell mal mit overflow getestet, aber ohne Gewähr,

CSS:

.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: -15px;
    margin-left: -15px;
    overflow: hidden;

AdioRockt · 31.08.2016

Vielen dank, habe das Problem gelöst

Habe nun aber noch eine zweite Frage, es geht um das carousel, welches ich als Slider verwenden möchte.

HTML:

<div class="slider">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Positionsanzeiger -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          </ol>

          <!-- Verpackung für die Elemente -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="img/img.jpg" alt="...">
              <div class="carousel-caption">
                ...
              </div>
            </div>
            <div class="item">
              <img src="img/img.jpg" alt="...">
              <div class="carousel-caption">
                ...
              </div>
            </div>
            ...
          </div>

          <!-- Schalter -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Zurück</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Weiter</span>
          </a>
        </div>
      </div>

Die height soll immer bei 300px und die width bei 100%, aber das Bild soll immer mittig sein (horizontal).
Leider funkt es nicht, das wird immer verzerrt oder komplett falsch angezeigt.

Habt ihr vill Ideen wir ich das lösen könnte?