Rimuovi lo spazio superiore della pagina da Bootstrap

Nel mio codice, ho una lacuna persistente nella parte superiore della mia pagina che sembra essere impostata sul tag da Bootstrap. Ho cercato tramite l'ispettore di Firefox e non ho trovato nulla. Cercando di aggiungere margine: 0; padding: 0; al tag non ha fatto nulla neanche.Rimuovi lo spazio superiore della pagina da Bootstrap

Il div #intro dovrebbe essere proprio in alto, ma lo spazio appare sopra di esso.

<body> 

     <div id="intro" style="width: 100%; padding:0; margin:0; text-align:center;"> 
      <h2>Test</h2> 
     </div> 

     <nav class="navbar navbar-default" role="navigation" style="margin: 0; opacity: 0.95;"> 
      <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <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="#" id="brand-mobile">Map My Cash</a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="text-align: center;"> 
       <ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;"> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        </ul> 
       </li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
      </div><!-- /.container-fluid --> 
     </nav> 

     @RenderBody() 

    </body>

fonte

2014-06-21 user3761858

puoi fornire una pagina dimostrativa che mostri il problema? Ad esempio una pagina demo sul tuo server o un [jsfiddle] (http://jsfiddle.net) –

@ user3761858, hai risolto questo in qualche modo? Ho lo stesso problema e il trucco del vecchio corpo {...} suggerito di seguito non funziona. –

È necessario aggiungere "margine: 0; riempimento: 0;" al tag del corpo

fonte

2014-06-21 21:11:38 Todd

Puoi provare a utilizzare il ripristino css. C'è una possibilità che il div o il corpo possano avere un riempimento o margine predefinito.

fonte

2014-06-21 21:14:39 warcoder

È necessario sovrascrivere il css predefinito.

Add seguente CSS dopo la CSS bootstrap di default si utilizza:

body{ 
    padding-top:0px; 
    margin-top: 0px; 
}

fonte

2014-06-21 21:15:35 writeToBhuwan

Got it! Il h1 era il problema. Ho aggiunto:

h1 { 
    margin-top: 0; 
}

Nessun vuoto nella parte superiore della pagina!

fonte

2015-08-05 10:51:57

Alla fine ho dovuto assegnare un bordo per sbarazzarsi degli spazi bianchi in alto.

<body><div style="border-top:solid black 1px;"><my-app>Loading...</my-app></div>

fonte

2016-03-29 21:10:17

Ho trovato il problema in Site.css nella cartella Contenuto nel mio progetto.

body { 
    padding-top: 50px; 
    padding-bottom: 20px; 
}

Ho semplicemente commentato il padding.

fonte

2017-09-20 19:28:33 RussBrasher

Rimuovi lo spazio superiore della pagina da Bootstrap

risposta

Problemi correlati