كيفية توسيط div باستخدام Bootstrap2؟

Question

http://twitter.github.com/bootstrap/scaffolding.html

حاولت مثل كل المجموعات:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

أو

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

تم تغيير أرقام الامتداد والإزاحة ...

لكن لا يمكنني الحصول على مربع بسيط يتمركز بشكل مثالي على الصفحة :(

أريد فقط مربعًا بعرض 6 أعمدة في المنتصف ...

---

يحرر:

فعلت ذلك مع

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

لكن الصندوق واسع جدًا، هل هناك أي طريقة يمكنني من خلالها القيام بذلك باستخدام SPAN7؟

span7 offset2 يعطي حشوة إضافية إلى اليسار span7 offset3 حشوة اضافية على اليمين...

Answer 1

بالإضافة إلى تقليص div نفسه إلى الحجم الذي تريده، عن طريق تقليل حجم الامتداد مثل ذلك ... class="span6 offset3", class="span4 offset4", ، إلخ...شيء بسيط مثل style="text-align: center" على div يمكن أن يكون له التأثير الذي تبحث عنه

لا يمكنك استخدامspan7 مع أي مجموعة إزاحة والحصول على الامتداد متمركزًا على الصفحة (لأن إجمالي الامتدادات = 12)

Answer 2

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

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

إذا قمت بتحديد هذه الفئة، فما عليك سوى إضافتها إلى النطاق وستكون جاهزًا للبدء.

<div class="span7 center"> box </div>

لاحظ أنه يجب تحديد فئة المركز المخصصة هذه بعد التمهيد المغلق.يمكنك استخدام !important ولكن هذا غير مستحسن.

Answer 3

يحتوي Bootstrap3 على .center-block الطبقة التي يمكنك استخدامها.يتم تعريفه على أنه

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

توثيق هنا.

Answer 4

إذا كنت تريد الانتقال إلى وضع التشغيل الكامل (وليس الاتجاه التلقائي لليسار / اليمين) ، فأنت بحاجة إلى نمط يتناسب مع 12 عمودًا ، على سبيل المثال2 فراغات ، 8 محتوى ، 2 فراغات.هذا ما سيفعله هذا الإعداد. إنه يغطي فقط المتغيرات -md- ، وأنا أميل إلى التقاطها بالحجم الكامل للصغار عن طريق إضافة col-xs-12

Genacodicetagpre

Answer 5

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

<div class="login-container">
  <!-- Your Login Form -->
</div>

والأسلوب:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

من المفترض أن يعمل ذلك بشكل جيد إذا كنت متداخلاً في مكان ما داخل التمهيد .container شعبة.

Answer 6

إضافة محتويات مركز الفصل الدراسي Genacodicetagpre

Answer 7

نوع رمزZuhaibAli يعمل بالنسبة لي لكنني غيرته قليلاً:

لقد أنشأت فصلًا جديدًا في css

Genacodicetagpre

ثم تصبح div

Genacodicetagpre

لقد أضفت col-md-6 لعرض div نفسه مما يعني في هذه الحالة أن div هو نصف الحجم ، وهناك 1 -12 col md في bootstrap.

Answer 8

اتبع هذه الإرشادات https://getbootstrap.com/docs/3.3/css/

استخدم رمز الترقيم العام Genacodicetagpre