Vertikale Bildlaufleiste in Bootstrap-Navigation, Karussell und Fußzeile

Ich habe eine einfache 4-Seite mit Twitter Bootstrap erstellt. Obwohl es zuvor funktioniert hat, erscheinen jetzt in verschiedenen Abschnitten auf der Startseite Bildlaufleisten.Vertikale Bildlaufleiste in Bootstrap-Navigation, Karussell und Fußzeile

Ich habe ein Dropdown auf der oberen Menüleiste. Immer wenn der Menüeintrag "Produkt" angeklickt wird (https://gyazo.com/8edfee3de1f27861dee5488da2b2a168), wird kein Menü angezeigt, sondern ein Menü mit einer Bildlaufleiste.

In ähnlicher Weise habe ich erstellt auch ein Karussell unterhalb der Navigations aber Scrollbalken auf dem „Zurück“ und „Weiter“

Die Scrollbar auf der Fußzeile

sogar erscheinen, erscheinen wenn sie auf einem angesehen Mobilgerät (ein Emulator) werden die Symbolleisten nicht angezeigt. (https://gyazo.com/7f78dfc4797a135cc3083fa1f6aa8bc2)

Hier ist der Code für die Indexseite:

<?php require_once "inc/functions.php"; ?> 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
     <![endif]--> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Simex</title> 
     <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
     <link rel="stylesheet" type="text/css" href="css/main.css" /> 
    </head> 
    <body> 
     <?php require "inc/navigationTop.php" ?> 

     <?php require "inc/slider.php"; ?> 

     <?php require "inc/homeTiles.php" ?> 

     <?php require "inc/footer.php" ?> 
    </body> 
</html>

Hier ist der Code für den Navigationsbereich:

<?php require_once "inc/functions.php" ?> 
<nav class="navbar navTop"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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> 
     <a class="navbar-brand" href="index.php" target="_self">Simex</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
     <ul class="nav navbar-nav pull-right navigationList"> 
     <li><a href="index.php">Home</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="osmosis.php">Reverse Osmosis</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="waterTreat.php">Water Treatment</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="waterBottling.php">Water Bottling Plant</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="vehicles.php">Japanese Reconditional Vehicles</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="seeds.php">Export &amp; Sesame Seeds</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="agri.php">Agri Farming &amp; Equipment</a></li> 
      </ul> 
     </li> 
     <li><a href="aboutUs.php">About Us</a></li> 
     <li><a href="contactUs.php">Contact Us</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container --> 
</nav>

Quelle

2016-04-25 Nafis Ahmed

Emulator Bild Link: https: // gyazo. com/7f78dfc4797a135cc3083fa1f6aa8bc2 –

Bildlaufleiste am Fuß angezeigt: https: //gyazo.com/685b752821c0b4f9627f08a50d095d7a –

Dies sieht aus wie ein 'CSS' Problem, könnten Sie einige davon einschließen? Es scheint, als hätten diese Objekte eine feste Höhe und 'overflow: scroll;', wodurch die Bildlaufleiste angezeigt wird. – Coleman

Das Problem war mit dem beigefügten Sheet.

Zurück css style:

* { 
. 
. 
overflow-x:hidden; 
}

ich die Überlauf-x Eigenschaft gelöscht und stellte sie als Eigenschaft für den Körper, wie:

body { 
. 
. 
. 
overflow-x:hidden; 
}

Quelle

2016-04-26 06:56:50

Vertikale Bildlaufleiste in Bootstrap-Navigation, Karussell und Fußzeile

Antwort

Verwandte Themen