[css] توسيط عمود باستخدام Twitter Bootstrap 3


Answers

الطريقة المفضلة للأعمدة المركزية هي استخدام "الإزاحات" (على سبيل col-md-offset-3 : col-md-offset-3 )

تمهيد 3.x توسيط الأمثلة

لعناصر توسيط ، هناك فئة مساعد center-block .

يمكنك أيضًا استخدام مركز النص إلى النص الأوسط (والعناصر المضمنة).

العرض التوضيحي : http://bootply.com/91632

EDIT - كما هو مذكور في التعليقات ، تعمل center-block على محتويات العمود display:block عناصر display:block ، ولكنها لن تعمل على العمود نفسه ( col-* divs) لأن Bootstrap يستخدم float .

تحديث 2018

الآن مع Bootstrap 4 ، تغيرت طرق التمركز ..

  • لا يزال يتم استخدام text-center display:inline عناصر display:inline
  • يستبدل mx-auto center-block display:block المركز display:block عناصر display:block
  • يمكن استخدام offset-* أو mx-auto لأعمدة الشبكة المركزية

mx-auto (auto x-axis margins) هي مركز display:block أو display:flex elements التي لها عرض محدد ، ( % ، vw ، px ، etc ..). يتم استخدام Flexbox افتراضيًا على أعمدة الشبكة ، لذا توجد أيضًا طرق توسيط متعددة في صندوق المرنة.

Demo Bootstrap 4 أفقي توسيط

بالنسبة إلى التمركز الرأسي في BS4 ، راجع https://stackoverflow.com/a/41464397/171456

Question

كيف أقوم بتوسيط قسم حجم عمود واحد داخل الحاوية (12 عمودًا) في Twitter Bootstrap 3.

يرجى الاطلاع على fiddle بداية. 

<body class="container">
    <div class="col-lg-1 col-offset-6 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

لذا ، أريد قسمًا ، مع centered الطبقة centered أن تكون متمركزة داخل الحاوية. قد أستخدم صفًا إذا كان هناك عدة أقسام ، ولكن في الوقت الحالي ، أريد فقط الحصول على div بحجم عمود واحد داخل الحاوية (12 عمودًا).

أنا أيضا لست متأكدا من أن النهج المذكور أعلاه جيد بما فيه الكفاية حيث أن القصد ليس التعويض عن النصف بمقدار النصف. لا أحتاج إلى مساحات حرة خارج div ومحتويات div تنكمش في نسبة. أريد أن أفرغ مساحة خارج div لتكون موزعة بالتساوي (يتقلص حتى عرض الحاوية == عمود واحد).



يمكنك استخدام flexbox حل جدا felxible إلى bootstrap الخاص بك

justify-content: center;

يمكن مركز العمود الخاص بك

تحقق من هذا الرابط من https://css-tricks.com/almanac/properties/f/flex/



بما أن koala_dev مستخدم في منهجه 1 ، فإنني أفضل طريقة الإزاحة بدلاً من الكتلة المركزية أو الهوامش ذات الاستخدام المحدود ، ولكن كما ذكر:

الآن ، هناك عيب واضح لهذه الطريقة ، إنها تعمل فقط حتى مع أحجام الأعمدة ، لذلك فقط .col-X-2 ، .col-X-4 ، col-X-6 ، col-X-8 و col-X- 10 معتمدة.

هذا يمكن حلها باستخدام النهج التالي للأعمدة الفردية. 

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>


جرب هذا 

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

يمكنك استخدام col آخر مثل col-md-2 وما إلى ذلك.



تتمثل الطريقة التي أتبعها لأعمدة المركز في استخدام display: inline-block للأعمدة text-align: center الوالد الحاوي.

كل ما عليك فعله هو إضافة فئة CSS 'centered' إلى row .

HTML: 

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS: 

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSfiddle: http://jsfiddle.net/steyffi/ug4fzcjd/



ما أقترحه هو ببساطة استخدام مركز النص الصف 

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>


يمكننا تحقيق ذلك باستخدام آلية تخطيط الجدول -

الآلية هي -

  1. لف جميع الأعمدة في div واحدة
  2. اجعل ذلك div كجدول ذو تخطيط ثابت
  3. اجعل كل عمود كخلية جدول
  4. استخدم خاصية المحاذاة العمودية للتحكم في موضع المحتوى

النموذج التجريبي here



ما عليك سوى تعيين العمود الذي يعرض محتوى col-xs-12 (mobile-first ؛-) وتكوين الحاوية فقط للتحكم في مدى اتساع المحتوى الذي تريده ، لذلك: 

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

للحصول على عرض توضيحي ، راجع http://codepen.io/Kebten/pen/gpRNMe :-)



طريقة 1: 

<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            YOUR CONTENT
        </div>
    </div>
</div>

الطريقة الثانية:

CSS 

.float-center{float: none;}


<div class="container">
    <div id="mydev" class="center-block float-center" style="width:75%;">
        YOUR CONTENT
    </div>
</div>

نصائح OnAirCode ، أمثلة وأدوات: OnAirCode



هذا يعمل. من غير المحتمل أن يكون هناك طريقة غير ملائمة ، لكنها تعمل بشكل جيد. تم اختباره من أجل الاستجابة (Y). 

.centered {
    background-color: teal;
    text-align: center;
}



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

للالتزام بالسؤال الأصلي حيث تريد توسيط عمود من 1 داخل شبكة من 12.

  1. توسيط عمود من 2 عن طريق موازنة 5
  2. أنشئ صفًا متداخلاً ، بحيث تحصل على 12 عمودًا جديدًا داخل عمودين.
  3. نظرًا لأنك ترغب في توسيط عمود من 1 ، و 1 هو "نصف" من 2 (ما تمركز في الخطوة 1) ، تحتاج الآن إلى توسيط عمود من 6 في الصف المتداخل ، والذي يتم بسهولة عن طريق تعويضه 3.

فمثلا: 

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

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



ببساطة قم بإضافة هذا إلى ملف CSS المخصص الخاص بك ، تحرير ملفات Bootstrap CSS مباشرة غير مستحسن ويمنع قدرتك على استخدام cdn. 

.center-block {
    float: none !important
}

لماذا ا؟

يستخدم Bootstrap CSS (الإصدار 3.7 والإصدارات الأقل): margin: 0 auto؛ ، ولكن يتم تجاوزه بواسطة خاصية Float لحاوية الحجم.

ملاحظة : بعد إضافة هذه الفئة لا تنس أن تحدد الطبقات حسب الترتيب الصحيح. 

<div class="col-md-6 center-block">Example</div>


لا تنس أن تضيف !important بعد ذلك ، يمكنك التأكد من أن العنصر سيكون في الواقع في الوسط: 

.col-centered{
  float: none !important;
  margin: 0 auto !important;
}


لأولئك الذين يتطلعون إلى توسيط عناصر الأعمدة على الشاشة عندما لا يكون لديك الرقم الدقيق لملء الشبكة ، كتبت قطعة صغيرة من جافا سكريبت لإرجاع أسماء الفئات: 

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

إذا كان لديك 5 عناصر وترغب في الحصول على 3 لكل صف على شاشة md ، md بذلك: 

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

ضع في اعتبارك ، يجب أن تكون الوسيطة الثانية قابلة للتوزيع على 12.



Share

Twitter   Google+   Facebook  

Links


Tags

css css   twitter-bootstrap   twitter-bootstrap-3   centering