html - bootstrap w3schools rtl




كيفية توسيط. btn-group من twitter-bootstrap؟ (10)

أنا باستخدام twitter-bootstrap ، ووجدت أنه من الصعب إلى حد ما مركز div الذي لديه فئة .btn-group ( link ). عادة ، أنا استخدم

margin: 0 auto; 

أو

text-align: center;

لتوسيط الأشياء داخل div ، ولكنها لا تعمل عندما يكون العنصر الداخلي يحتوي على خاصية float: left والتي تستخدم في هذه الحالة للتأثيرات المرئية.

http://jsfiddle.net/EVmwe/1

https://code.i-harness.com


أنا أستخدم الحل التالي.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

أو أضف "ترقيم الصفحات" ، مثال:

<div class="btn-toolbar pagination-centered">
  <div class="btn-group">
    <a href=1 class="btn btn-small">1</a>
    <a href=1 class="btn btn-small">2</a>
    <a href=1 class="btn btn-small">3</a>
  </div>
</div>

ارمي btn-group في علامة ap واستخدم محاذاة النص: نمط المركز لـ p {}

    p {
    text-align: center;
    }

    <p>
    <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
    </div>
    </p>

في Bootstrap 3 ، تحتاج فقط إلى بنية بسيطة مثل متابعة التغيير

    <div class="btn-toolbar">
        <div class="btn-group">
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 1                                     
            </button>           
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 2
            </button>
            <button onclick="#" class="btn btn-default btn-sm" type="button">                                               
                Click 3
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 4
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 5
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 6
            </button>
        </div>
    </div

وتعديل النمط فقط هذا (تجاوز bootstrap) الذي يطفو على اليسار بحيث لا يمكنك فرض الهامش أو مركز النص:

.btn-toolbar .btn-group {float:initial;}

هذا يعمل بالنسبة لي ، دون تغيير كبير.


في حال أراد أي شخص آخر تغيير عرض .btn-group ، فيمكنك إجراء العرض التقديمي بدلاً من العرض. انا فعلت هذا:

HTML:

<div class="text-center">
<div class="btn-group">
    <button class="btn">1</button>
    <button class="btn">2</button>
</div>
</div>

CSS:

.btn-group {min-width: 90%;}
.btn {width: 50%;}

يقوم هذا بتعيين عرض btn-group على 90٪ من مركز النص وكل زر مضمّن هو 50٪ من مجموعة الأزرار (45٪ من div-centre text).


ل bootstrap 4

<div class="text-center">
    <div class="btn-group">
        <a href="#" class="btn btn-primary">text 1</a>
        <a href="#" class="btn btn-outline-primary">text 2</a>
    </div>
</div>

ما عليك سوى الإعلان عن روابط الأزرار على هيئة inline-block بدلاً من float:left text-align:center سيعمل إعلان text-align:center ، كما يلي:

.btn-group a {
    display:inline-block;
}

العرض التوضيحي: http://jsfiddle.net/EVmwe/3/


منذ تويتر Bootstrap 3 ليس هناك حاجة لأي حل بديل. ما عليك سوى تحديد text-align: center العنصر الرئيسي.


هذا يعمل بالنسبة لي (Bootstrap 3):

<div class="text-center">
   <div class="btn-group">
      <a href=1 class="btn btn-small">1</a>
      <a href=1 class="btn btn-small">2</a>
      <a href=1 class="btn btn-small">3</a>
   </div>
</div>

تم التعديل: تم تغيير هذا اعتبارًا من Bootstrap 3. راجع الحل لـ Bootstrap 3 أدناه.

هل إضافة غلاف div خارج السؤال؟

انظر إلى هذا المثال: http://jsfiddle.net/EVmwe/4/

جزء مهم من الكود:

/* a wrapper for the paginatior */
.btn-group-wrap {
    text-align: center;
}

div.btn-group {
    margin: 0 auto; 
    text-align: center;
    width: inherit;
    display: inline-block;
}

a {
    float: left;   
}

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

استبدل عرض المراسي بالحاجز المضمن ، وعوم: لا شيء ، ربما يعمل أيضًا ، كما قالAndres Ilich.

تحديث من أجل Bootstrap 3

اعتبارًا من Bootstrap 3 ، لديك فئات المحاذاة (كما هو موضح في documentation ). عليك الآن ببساطة إضافة فئة text-center إلى أحد الوالدين. مثل ذلك:

<div class="text-center">
    <ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>
</div>

انظر مثال العمل هنا: http://jsfiddle.net/EVmwe/409/





twitter-bootstrap