Twitter бетбелгісі ақ парақтың оң жағында

Twitter Bootstrap арқылы менің жауапты стильдер парағыммен мәселе туындады. Сайт ешқандай проблемаларсыз жақсы көрінеді, бірақ қандай да бір себептермен жауап беретін планшеттің және телефонның беттің оң жағындағы үлкен ақ түстері бар. Оның айналдыру жолағы оның үлкен ақ босын шығармайды

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

Мен мұнда мүлдем өзгергеніме сенбеймін. Ені немесе ештеңе жоқ нәрсе. Chrome-дағы нысандарды тексеріп, ені ақылдылыққа толы ештеңені көре алмады

22

9 жауаптар

Бұл біраз кеш болуы мүмкін, бірақ басқа жауаптарды адастыратын деп таптым.

Шын мәнінде, жол сыныбы мәселені тудыратын нәрсе болып табылады, бірақ бұл әрқашан контейнер элементінің ішіне орналастырылуы керек.

http://getbootstrap.com/css/ -ден:

Жолдар сәйкесінше теңестіру және толтыру үшін .container (fixed-width) немесе .container-fluid (толық ені) ішіне орналастырылуы керек.

Контейнерлік элемент әдетте оң және сол жағында -15px толтыруға ие, ал жол сыныбы оң және сол жақта 15 пиксель толтыруға ие. Екі бір-бірін жоққа шығарады. Егер екіеудің біреуі болмаса, қосымша орынды көресіз.

39
қосылды
line - container немесе container-fluid ішінде болса да, оң жақта үлкен ақ кеңістікті көремін. Chrome браузерлері құралдарымен де бұл мүмкін емес. Бұл тек пішіндері бар беттерде орын алады. Кез келген идеялар?
қосылды автор Anupam, көзі

Сіз көріңіз:

html, body { overflow-x: hidden; }

Сіз скрипка жібере аласыз ба?

30
қосылды
рахмет @JosephK бұл менің мәселемді шешетін маржин-оң жағы болды
қосылды автор Bhushan Babar, көзі
Бұл сіздің сайтыңыздағы кез-келген басқа бетке көлденең жылжыту жолағының қажеті болмаса, жұмыс істейді. Кем дегенде, бұл менің тәжірибем.
қосылды автор JosephK, көзі
Bootstrap 'row' сыныбына және {margin-right: -15px} жүктеп алыңыз. Мұны менің бетіме әкелді.
қосылды автор JosephK, көзі
Мен оны түсіндім. Бұл толтырғышпен байланысты нәрсе болды
қосылды автор Lynx, көзі
Өкінішке орай, мен бұл плагинді әдетте ешқашан пайдаланбаймын және мен бұл шешімді хакерлік деп білемін.
қосылды автор Jules, көзі
Бұл менің мәселемді шешді, бірақ содан кейін bootstrap's scrollspy жұмысын тоқтатты. : /
қосылды автор Gabriel Kunkel, көзі

Келесі мета тегіңізді 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" />

Сондай-ақ орнатуды байқап көріңіз

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

html және дене бойынша

7
қосылды
@ user2267668 - жауап берілді
қосылды автор Scott Selby, көзі
білмеймін, ешқандай html немесе CSS кодынсыз жібергенде, олар жақсы ықтимал түзетулер болды, шын мәнінде сізге көп нәрсе айта алмады
қосылды автор Scott Selby, көзі
сіз кез-келген шұңқырды қолдандыңыз ба? анық көріңіз: екеуі де; сіздің контейнеріңізде
қосылды автор DiederikEEn, көзі
жұмыс істемеді ... Егер ол оны қысқартуға көмектессе ... планшеттерде (ipad) және смартфондардағы (жарқын) 50-60px аралығындағы шамамен 20-30px аралығындағыдай көрінеді.
қосылды автор Lynx, көзі
иә, бұл да жұмыс істемейді
қосылды автор Lynx, көзі
Иә, мен кодты жібере аламын, бірақ алмаймын деп түсінемін. Мен тағы да рахмет айтамын деп ойлаймын!
қосылды автор Lynx, көзі

Менде осындай проблема бар. Мен Bootstrap-тің «row» класының жасайтын толтырғышты тудыратын нысанды таптым.

Егер қоссаңыз

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

сіздің CSS файлыңызда/жолдағы нысандарда, бұл сіздің бетіңізге толтыруға себеп болатын элементтердің кем дегенде бірін түзетуі керек.

7
қосылды
Жолдың толтырылуы әдейі. Жолдарыңызды .container-fluid ішіне орау керек.
қосылды автор Andrew, көзі

Әдетте, бұл сізде орнатылған контейнер енінің шекараларын бұзатын, div немесе бөлімдерді толтыру, маржа, орналасу болуы мүмкін болғандықтан орын алады. Инспектордың көрсеткі немесе толып тастауы мүмкін: контейнер тегіне жасырынып, қай бөлімді таба аласыз ені бұзылған.

1
қосылды

Жақында маған өте ұқсас мәселе болды, ол мені біраз уақытқа дейін түсінді. Мен үшін қарапайым жол/контейнерлік мәселе емес еді. Құсбелгілерді қолмен көрсету үшін form-control қолдандым. Bootstrap-де form-control бар барлық мәтіндік элементтерде width: 100% әдепкі бойынша . Онлайнда көптеген құсбелгі бар болғандықтан, оларды (көрінбейтін) төңкеріп, оң жағында бұл үлкен ақ босатуға себеп болды. Бір қызығы, мұны Chrome Dev құралдарын пайдалану арқылы да оңайлатуға болмады.

width параметрін auto; ( Бұл параметрді орнату үшін келесі шешімді қолданамын жауап көмектесті):

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

және

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

Біреуге көмектеседі деген үміттемін

0
қосылды

Сондай-ақ, контейнерлерді қалай пайдаланатыныңызды тексеріңіз. Оларды ұя салуға болмайды, олар проблема тудырады.

Жобаларыңызда пайдалану үшін екі контейнердің біреуін таңдауға болады. Есіңізде болсын, толтыру және одан көп болу себебінен контейнер ешқандай ұяшық болып табылмайтынын ескеріңіз.

Дерек көзі: http://getbootstrap.com/css/#overview-container

0
қосылды

Менде өте ұқсас мәселе болды және біраз уақытымды жұмсап болғаннан кейін, CSS-ні ​​стилизациялауды контейнер-сұйықтық сыныбының сол жағында және оң жағында 0px толтырып қолданғанын түсіндім, сондықтан стилдер әдеттегі контейнерде қажет -15px толтыруды асып түсірді - Жолдарды өз орнында ұстауға арналған.

0
қосылды

Мобильді құрылғыларда ұқсас мәселе туындады. Мәселе мынада, элементті кішігірім экран өлшемінде жасырдым, бірақ оның ата-аналық контейнерін ұмытып кеттім. Бұл контейнер әлі де мазмұнның бос екеніне қарамастан, көрсетіле бастады, бұл дұрыс сайттың үлкен ақ түсуіне алып келді. Баланың орнына ата-аналық элементті жасыру бұл үшін мен үшін шешілді.

0
қосылды