Twitter bootstrap witte opening aan de rechterkant van de pagina

Ik ondervind een probleem met mijn responsieve stylesheet met Twitter Bootstrap. De site wordt prima weergegeven zonder problemen, maar om welke reden dan ook heeft het tablet en de telefoon een enorme witte opening aan de rechterkant van de pagina. Het is niet de schuifbalk die een enorme witte opening geeft

http://i.imgur.com/JeRRRqq.png

Ik geloof niet dat ik hier helemaal veranderd ben. Niets met breedte of iets anders. Inspecteerde de objecten in Chrome en kon niet zien dat er iets over de breedte stroomde

22

9 antwoord

Dit kan een beetje laat zijn, maar ik vond de andere antwoorden misleidend.

Het is waar dat de rijklasse het probleem veroorzaakt, maar dat komt omdat het altijd geacht wordt in een containerelement te worden geplaatst.

van http://getbootstrap.com/css/ :

Rijen moeten in een .container (vaste breedte) of .container-vloeistof (volledige breedte) worden geplaatst voor een juiste uitlijning en opvulling.

Het containerelement heeft meestal een -15px padding op zowel rechts als links en de rijklasse heeft een 15px padding op rechts en links. De twee heffen elkaar op. Als een van de twee niet aanwezig is, ziet u extra ruimte.

39
toegevoegd
rij s op mijn pagina zijn binnen container of container-vloeistof maar ik zie nog steeds de grote witte ruimte aan de rechterkant. Ik kan het niet eens met Chrome dev-tools uitzoeken. Dit gebeurt alleen op pagina's met formulieren. Om het even welke ideeën?
toegevoegd de auteur Anupam, de bron

Heb je geprobeerd:

html, body { overflow-x: hidden; }

Kun je een viool plaatsen?

30
toegevoegd
bedankt @JosephK het was margin-right van rij die mijn probleem oploste
toegevoegd de auteur Bhushan Babar, de bron
Dit werkt tenzij u een horizontale schuifbalk op een andere pagina op uw site nodig heeft. Tenminste, dat was mijn ervaring.
toegevoegd de auteur JosephK, de bron
Pas op voor de klasse 'rij' van de bootstrap en de {margin-right: -15px}. Dat heeft dit op mijn pagina veroorzaakt.
toegevoegd de auteur JosephK, de bron
Ik heb het uitgezocht. Het had iets te maken met de opvulling
toegevoegd de auteur Lynx, de bron
Het spijt me, ik gebruik meestal nooit die plug-in en ik weet dat deze oplossing hack-achtig is.
toegevoegd de auteur Jules, de bron
Dit loste mijn probleem op, maar toen draaide de scripspy van bootstrap niet meer. : /
toegevoegd de auteur Gabriel Kunkel, de bron

Voeg de volgende metatag toe aan uw HTML

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />

Probeer ook de instelling

html, body. div{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

op de html en body

7
toegevoegd
@ user2267668 -antwoord antwoord
toegevoegd de auteur Scott Selby, de bron
weet het niet, zonder enige html- of css-code gepost, waren dit waarschijnlijk de beste oplossingen, konden niet veel meer vertellen
toegevoegd de auteur Scott Selby, de bron
heb je anyfloats gebruikt? probeer duidelijk: beide; op uw container
toegevoegd de auteur DiederikEEn, de bron
werkte niet ... Als het helpt om het te verkleinen .. Het ziet eruit als het enige gat van ongeveer 20-30 px op tablets (ipad) en ongeveer een kloof van 50-60 px op smartphones (levendig)
toegevoegd de auteur Lynx, de bron
ja dit werkt ook niet
toegevoegd de auteur Lynx, de bron
Ja, ik begrijp dat ik zou willen dat ik code kon plaatsen maar dat kan niet. Ik denk dat ik er achter kan komen lol, nogmaals bedankt!
toegevoegd de auteur Lynx, de bron

Ik heb hetzelfde probleem. Ik ontdekte dat het object dat ervoor zorgde dat de opvulling werd gemaakt Bootstrap's "rij" -klasse was.

Als je toevoegt

.row {
  padding-right: 0px;
  margin-right: 0px;
}

voor uw CSS-bestand/rij-objecten moet dit ten minste één van de items die opvulling op uw pagina veroorzaken, herstellen.

7
toegevoegd
De rijpadding is opzettelijk. U moet uw rijen in een .containervloeistof wikkelen.
toegevoegd de auteur Andrew, de bron

Over het algemeen gebeurt dit omdat je een div hebt die de grenzen van je ingestelde containerscheiding doorbreekt, kan een div of secties opvulling, marge, positionering zijn .. je kunt de inspecteur pijl of overflow gebruiken: verborgen op de container tag om te zien welke sectie je zou kunnen gebruiken hebben de breedte gebroken.

1
toegevoegd

Ik had onlangs een zeer vergelijkbare kwestie, die me nogal wat tijd kostte om erachter te komen. Voor mij was het niet het gebruikelijke rij/container probleem. Ik gebruikte een formulier-controle om selectievakjes henmatig te renderen. In Bootstrap hebben alle tekstuele elementen met form-control width: 100% stenaard . Het feit dat er veel selectievakjes online waren, zorgde ervoor dat ze (onzichtbaar) overliepen en veroorzaakten deze grote witte opening aan de rechterkant. Verrassend genoeg was het ook niet eenvoudig om dit te debuggen met Chrome Dev-tools.

Ik gebruik nu de volgende oplossing om de width in auto; in te stellen ( dit antwoord geholpen):

<input class="form-control form-control-inline" type="checkbox" ... ... .. />

en

.form-control-inline {
  width: auto;
}

Ik hoop dat het iemand helpt

0
toegevoegd

Controleer ook om te zien hoe u containers gebruikt. Ze kunnen niet worden genest, ze zullen problemen veroorzaken.

U kunt een van de twee containers kiezen die u in uw projecten kunt gebruiken. Merk op dat, als gevolg van opvulling en meer, geen enkele container nestbaar is.

Bron: http://getbootstrap.com/css/#overview-container

0
toegevoegd

Ik had net een soortgelijk probleem en na enige tijd besefte ik dat ik CSS-styling had toegepast om padding van 0px aan zowel de linker- als de rechterkant van een container-vloeistofklasse toe te voegen en daarom werd de standaard -15px opvulling die nodig is op de container, overschreven -vochtig om rijen op hun juiste plaats te houden.

0
toegevoegd

Ik heb een soortgelijk probleem gehad op mobiele apparaten. Het probleem was dat ik een element had verborgen op kleinere schermformaten, maar de bovenliggende container was vergeten. Deze container werd nog steeds weergegeven, hoewel de inhoud ervan leeg was, wat leidde tot een grote witte opening op de juiste locatie. Het verbergen van het ouderelement in plaats van het kind loste dit voor mij op.

0
toegevoegd