it-swarm.com.de

Bootstrap 2.3 CSS Responsive links mit einem Leerzeichen auf der rechten Seite

Ich erstelle eine Website (und ich bin ein Noob dabei). Ich arbeite an der Funktionalität des Designs, und ich werde später jemanden Grafiken erstellen lassen.

Wenn es derzeit in responsive (mobile Ansicht) geht, verbleibt rechts ein 2px-Rand, der in einem mobilen Browser (und scrollbar) verschoben werden kann. Ich kann nicht für das Leben von mir das loswerden.

wenn ich overflow-x: hidden einschalte, wird es nicht scrollbar, aber immer noch beweglich.

Ich möchte, dass dieser zusätzliche Raum weggeht. Ich sehe es nicht als Auffüllung in einer der CSS definiert.

Bootstrap verwenden 2.3

18
Andrew

Gelöst durch Hinzufügen zu meiner benutzerdefinierten CSS:

html, body {
  width: auto !important;
  overflow-x: hidden !important;
}

Hinweis: Das ! Important wird nur verwendet, damit es Vorrang vor anderen CSS hat. Die meisten Instanzen benötigen !important nicht, wenn Sie Ihr benutzerdefiniertes CSS nach dem Bootstrap-CSS laden.

62
Andrew

Ich weiß, dass ich zum Spiel hier sehr spät komme, aber ich habe herausgefunden, warum das überhaupt passiert. Wenn Sie eine Navbar verwenden, gibt es im Navbar-Right-Element einige zusätzliche Polsterungen, die nicht funktionieren sollten da sein. Es hat eine Margin-Right von 15px, die diese Lücke verursacht. Überschreiben und Problem gelöst!

3
Anna Wygant

Ersetzen Sie .container-Klasse durch .container-fluid im Hauptteil und in Ihrer .css-Datei machen Sie den padding right and left : 0px; Das war es.

2
Nilesh

Ich habe es versucht, aber es funktionierte nur bei browserbasierten mobilen Emulatoren. Es funktioniert auch gut, wenn ich die Größe meines Browsers verändere.

Wenn ich es jedoch auf meinem Handy - Samsung Galaxy S2 & iPhone 5 - abchecke, wird mir immer noch der weiße Raum angezeigt.

Ich habe auch versucht: 

@media handheld and (max-width: 481px) and (orientation: portrait) {
  html,body{width:100%;overflow-x:hidden;}
}

@media handheld and (max-width: 380px) and (orientation: portrait) {
  html,body{width:100%;overflow-x:hidden;}
}
1
Ritesh A

Rand links, Rand rechts entfernen

Und ändern

    <div class="navbar">
    <div class="navbar-inner navbar-fixed-top">

zu

    <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">`
0
patnav

Ich habe dieses Problem gelöst, indem ich die .row einfach in ein anderes .container-fluid-Klassenelement wickelte. Dies sollte für die Marge sorgen.

0
andromeda