الفجوة البيضاء bootstrap تويتر على الجانب الأيمن من الصفحة

أواجه مشكلة في ورقة أنماط الاستجابة باستخدام Twitter Bootstrap. يظهر الموقع على ما يرام مع عدم وجود مشاكل ولكن لأي سبب من الأسباب في أن اللوحية والهاتف المتجاوبين لديهم هذه الفجوة البيضاء الضخمة إلى يمين الصفحة. ليس لها شريط التمرير القضية فجوة بيضاء ضخمة

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

لا أعتقد أنني تغيرت إلى الكثير هنا على الإطلاق. لا شيء مع العرض أو أي شيء. فحص الكائنات في Chrome ولم يتمكن من رؤية أي شيء يطفح أكثر من عرضه

22

9 إجابة

قد يكون هذا متأخرا قليلا لكني وجدت أن الإجابات الأخرى مضللة.

صحيح أن فئة الصف هي سبب المشكلة ، ولكن ذلك يرجع إلى أنه من المفترض دائمًا وضعها داخل عنصر حاوية.

من http://getbootstrap.com/css/ :

يجب وضع الصفوف داخل .container (ذو عرض ثابت) أو .container-fluid (كامل العرض) للمحاذاة الصحيحة والحشو.

يحتوي عنصر الحاوية عادةً على حاشية -15 بكسل على كلا من اليمين واليسار ، بينما يحتوي فئة الصف على حشوة طولها 15 بكسل على اليمين واليسار. الاثنان يلغي كل منهما الآخر. إذا كان أحدهما غير موجود ، فسترى مساحة إضافية.

39
وأضاف
صف s على صفحتي container أو container-fluid ، لكنني لا أزال أرى المساحة البيضاء الكبيرة على اليمين. لا يمكن معرفة ذلك حتى باستخدام أدوات مطوري Chrome. يحدث هذا فقط على الصفحات التي تحتوي على النماذج. أيه أفكار؟
وأضاف المؤلف Anupam, مصدر

هل حاولت:

html, body { overflow-x: hidden; }

يمكنك نشر كمان؟

30
وأضاف
شكراJosephK كان هامش الهامش من الصف الذي حل مشكلتي
وأضاف المؤلف Bhushan Babar, مصدر
يعمل هذا ما لم تحتاج إلى شريط تمرير أفقي في أي صفحة أخرى على موقعك. على الأقل ، كانت هذه تجربتي.
وأضاف المؤلف JosephK, مصدر
احترس من فئة "الصف" في Bootstrap و {margin-right: -15px}. كان هذا يسبب هذا على صفحتي.
وأضاف المؤلف JosephK, مصدر
اكتشفتها. كان لديها شيء للقيام به مع الحشو
وأضاف المؤلف Lynx, مصدر
أنا آسف ، عادةً لا أستخدم هذا المكون الإضافي مطلقًا وأعلم أن هذا الحل هو الإختراق.
وأضاف المؤلف Jules, مصدر
هذا حل مشكلتي ، ولكن بعد ذلك توقف scrollspy في Bootstrap العمل. : /
وأضاف المؤلف 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%;
}

على أتش تي أم أل والجسم

7
وأضاف
@ user2267668 إجابة معدلة
وأضاف المؤلف Scott Selby, مصدر
لا أعرف ، دون أي html أو CSS code posted ، تلك كانت أفضل الحلول على الأرجح ، لا يمكن أن تخبرك أكثر بكثير
وأضاف المؤلف Scott Selby, مصدر
هل استخدمت أي زلاقات؟ حاول واضحة: على حد سواء. على الحاوية
وأضاف المؤلف DiederikEEn, مصدر
لم ينجح ... إذا كان يساعد على تضييقها ... يبدو وكأنه فجوة حول 20-30px فقط على الأجهزة اللوحية (ipad) وحول فجوة 50-60px على الهواتف الذكية (حية)
وأضاف المؤلف Lynx, مصدر
نعم هذا لا يعمل سواء
وأضاف المؤلف Lynx, مصدر
نعم ، فهمت أنني أتمنى أن أتمكن من إرسال الرمز ولكن لا يمكنني ذلك. أعتقد أنني يمكن معرفة ذلك لول شكرا مرة أخرى!
وأضاف المؤلف Lynx, مصدر

أواجه نفس المشكلة. اكتشفت أن الكائن الذي كان يسبب الحشو المراد إنشاؤه هو فئة "الصف" في Bootstrap.

اذا اضفت

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

إلى كائنات ملف/صف CSS لديك ، يجب أن يؤدي ذلك إلى إصلاح عنصر واحد على الأقل من العناصر يؤدي إلى الحشو على صفحتك.

7
وأضاف
حشوة الصف متعمدة. يجب أن تكون ملفوفًا في .container-fluid .
وأضاف المؤلف Andrew, مصدر

يحدث هذا بشكل عام نظرًا لأن لديك قسمًا يكسر حدود عرض حاوية المجموعة لديك ، يمكن أن يكون قسمًا مخصصًا للقسمة أو حشوة أو هامشًا أو موضعًا .. يمكنك استخدام سهم المفتش أو تجاوزه: مخفيًا على علامة الحاوية لترى القسم الذي قد لديك كسر العرض.

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 المطلوب في الحاوية -fluid لعقد الصفوف في مكانها الصحيح.

0
وأضاف

لقد واجهت مشكلة مماثلة على أجهزة الجوال. كانت المشكلة أنني أخفيت عنصرًا على أحجام الشاشة الأصغر ، ولكن نسيت الحاوية الرئيسية. كانت هذه الحاوية لا تزال تُعرض حتى لو كان محتواها فارغًا ، مما أدى إلى وجود فجوة بيضاء كبيرة في الموقع الصحيح. اخفاء العنصر الرئيسي بدلا من الطفل حل هذا بالنسبة لي.

0
وأضاف