it-swarm.asia

محاذاة رأسية مع Bootstrap 3

أنا أستخدم Twitter Bootstrap 3 ، وأواجه مشكلات عندما أرغب في محاذاة رأسية div ، على سبيل المثال - JSFiddle link :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

يستخدم نظام الشبكة في Bootstrap float: left ، وليس display:inline-block ، لذلك لا تعمل الخاصية vertical-align. لقد حاولت استخدام margin-top لإصلاحه ، لكنني أعتقد أن هذا ليس حلاً جيدًا للتصميم المتجاوب.

834
corinem

تقدم هذه الإجابة اختراقًا ، لكنني أوصي بشدة باستخدام flexbox (كما هو مذكور في Haschem answer ) ، لأنه معتمد الآن في كل مكان.

رابط العروض التوضيحية:
- Bootstrap 3
- Bootstrap 4 alpha 6

لا يزال بإمكانك استخدام فئة مخصصة عند الحاجة إليها:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

يؤدي استخدام inline-block إلى إضافة مساحة إضافية بين الكتل إذا سمحت بمساحة حقيقية في الكود (مثل ...</div> </div>...). تقطع هذه المساحة الإضافية شبكتنا إذا أضافت أحجام الأعمدة ما يصل إلى 12:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

هنا ، لدينا مسافات إضافية بين <div class="[...] col-lg-2"> و <div class="[...] col-lg-10"> (حرف إرجاع و 2 علامة تبويب/8 مسافات). و حينئذ...

Enter image description here

دعونا ركلة هذه المساحة الإضافية!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Enter image description here

لاحظ على ما يبدو تعليقات عديمة الفائدة <!-- ... -->؟ إنها مهمة - بدونها ، ستشغل المسافة البيضاء بين عناصر <div> مساحة في التخطيط ، مما يؤدي إلى كسر نظام الشبكة.

ملاحظة: تم تحديث Bootply

893
zessx

تصميم مربع مرن

مع ظهور CSS Flexible Box ، العديد من كوابيس مصممي الويب1 تم حلها. واحدة من أكثرها اختراق ، المحاذاة العمودية. الآن أصبح من الممكن حتى في ارتفاعات غير معروفة .

"لقد انتهى عقدين من اختراقات التصميم. ربما ليس غدًا ، ولكن قريبًا ، وبقية حياتنا."

- CSS Legendary Eric Meyer at W3Conf 2013

الصندوق المرن (أو باختصار ، Flexbox) ، هو نظام تخطيط جديد مصمم خصيصًا لأغراض التخطيط. مواصفات المواصفات :

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

كيف يمكن أن تساعد في هذه الحالة؟ حسنا، لنرى.


الأعمدة الانحياز العمودي

باستخدام Twitter Bootstrap ، لدينا .rows بعض .col-*s. كل ما نحتاج إلى القيام به هو عرض .row المطلوب2 كـ حاوية فليكس box ثم قم بمحاذاة كل فليكس العنصر s (الأعمدة) رأسياً بواسطة align-items property).

مثال هنا (يرجى قراءة التعليقات بعناية)

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>
.vertical-align {
    display: flex;
    align-items: center;
}

الإخراج

Vertical aligned columns in Twitter Bootstrap

تعرض المنطقة الملونة مربع الحشو للأعمدة.

التوضيح في align-items: center

8.3 محاذاة محور متقاطع: الخاصية align-items

عناصر Flex يمكن محاذاتها في محور متقاطع من السطر الحالي للحاوية المرنة ، على غرار justify-content لكن في الاتجاه العمودي. align-items يحدد المحاذاة الافتراضية لجميع من عناصر الحاوية المرنة ، بما في ذلك المجهول عناصر المرن .

align-items: center; حسب القيمة المركزية ، يتم توسيط مربع الهامش flex العنصر ') في المحور المتقاطع داخل السطر).


تنبيه كبير

ملاحظة مهمة # 1: لا يقوم Twitter Bootstrap بتحديد width من الأعمدة في أجهزة صغيرة جدًا إلا إذا أعطيت أحد فئات .col-xs-# للأعمدة.

لذلك في هذا العرض التوضيحي المحدد ، استخدمت فئات .col-xs-* من أجل عرض الأعمدة بشكل صحيح في وضع الهاتف المحمول ، لأنها تحدد width للعمود بشكل صريح.

ولكن بدلاً من ذلك ، يمكنك إيقاف التشغيل تخطيط Flexbox ببساطة عن طريق تغيير display: flex; إلى display: block; بأحجام شاشة محددة. على سبيل المثال:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

أو يمكنك حدد .vertical-align فقط على أحجام شاشة محددة مثل ذلك:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

في هذه الحالة ، سأذهب مع KevinNelson 's approach .

ملاحظة مهمة # 2: تم حذف بادئات البائع بسبب الإيجاز. تم تغيير بناء جملة Flexbox أثناء ذلك الوقت. لن يعمل بناء الجملة المكتوبة الجديد على الإصدارات الأقدم من متصفحات الويب (ولكن ليس قديمًا مثل Internet Explorer 9! Flexbox مدعوم في Internet Explorer 10 والإصدارات الأحدث).

هذا يعني أنه يجب عليك أيضًا استخدام الخصائص التي يسبقها البائع مثل display: -webkit-box وما إلى ذلك في وضع الإنتاج.

إذا قمت بالنقر فوق "Toggle Compiled View" في Demo ، سترى الإصدار السابق من إعلانات CSS (بفضل Autoprefixer ).


أعمدة كاملة الارتفاع ذات محتويات محاذاة رأسية

كما ترى في العرض التوضيحي السابق ، لم تعد الأعمدة (العناصر المرنة) عالية مثل الحاوية الخاصة بها (صندوق الحاوية المرنة. أي عنصر .row).

هذا بسبب استخدام قيمة center لخاصية align-items. القيمة الافتراضية هي stretch حتى تتمكن العناصر من ملء الارتفاع الكامل للعنصر الأصل.

لإصلاح ذلك ، يمكنك إضافة display: flex; إلى الأعمدة أيضًا:

مثال هنا(مرة أخرى ، ضع في اعتبارك التعليقات)}

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

الإخراج

Full-height columns with vertical aligned contents in Twitter Bootstrap

تعرض المنطقة الملونة مربع الحشو للأعمدة.

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


لمزيد من القراءة بما في ذلك دعم المتصفح ، ستكون هذه الموارد مفيدة:


1. محاذاة عموديا صورة داخل div مع ارتفاع استجابة2. من الأفضل استخدام فصل إضافي من أجل عدم تغيير .row الافتراضي لـ Twitter Bootstrap.

861
Hashem Qolami

عملت التعليمات البرمجية أدناه بالنسبة لي:

.vertical-align {
    display: flex;
    align-items: center;
}
39
Thanga

جرب هذا في CSS الخاص بـ div:

display: table-cell;
vertical-align: middle;
25
user2249160

التحديث 2018

أعرف أن السؤال الأصلي كان في Bootstrap 3 ، ولكن الآن بعد إصدار Bootstrap 4 ، إليك بعض الإرشادات المحدّثة حول المركز الرأسي.

مهم! المركز العمودي نسبة إلى الارتفاع للوالد

إذا كان عنصر العنصر الذي تحاول توسيطه غير محدد ارتفاع ، لا شيء من حلول توسيط رأسية ستعمل!

Bootstrap 4

الآن أن Bootstrap 4 هو flexbox بشكل افتراضي هناك العديد من الطرق المختلفة للمحاذاة العمودية باستخدام: الهوامش التلقائية ، flexbox utils ، أو عرض الأدوات جنبا إلى جنب مع أدوات المحاذاة الرأسية . في البداية ، تبدو "أدوات المحاذاة الرأسية" واضحة ، لكن هذه {فقط)) تعمل مع عناصر العرض المضمنة والجدولية. فيما يلي بعض خيارات توسيط العمودي Bootstrap 4 ..


1 - المركز الرأسي باستخدام الهوامش التلقائية:

هناك طريقة أخرى للتوسيط رأسياً وهي استخدام my-auto. هذا سوف مركز العنصر داخل الحاوية الخاصة به. على سبيل المثال ، h-100 يجعل الصف ممتلئًا بالصف ، و my-auto سيقوم بتوسيط العمود col-sm-12 رأسياً.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Bootstrap 4 - المركز الرأسي باستخدام الهوامش التلقائية العرض التوضيحي

يمثل my-auto الهوامش على المحور ص الرأسي وهو مكافئ:

margin-top: auto;
margin-bottom: auto;

2 - مركز عمودي مع Flexbox:

Vertical center grid columns

نظرًا لأن Bootstrap 4 .row أصبح الآن display:flex ، فيمكنك ببساطة استخدام align-self-center في أي عمود لتوسيطه رأسياً ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

أو ، استخدم align-items-center على كامل .row للمركز عموديًا لمحاذاة كل col-* في الصف ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Bootstrap 4 - أعمدة الارتفاع المختلفة للمركز الرأسي العرض التوضيحي


3 - المركز العمودي باستخدام Utils العرض:

يحتوي Bootstrap 4 على عرض الأدوات التي يمكن استخدامها في display:table ، display:table-cell ، display:inline ، وما إلى ذلك. يمكن استخدامها مع أدوات المحاذاة الرأسية لمحاذاة عناصر خلية مضمنة أو مضمنة أو مضمنة في خلية الجدول.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Bootstrap 4 - المركز الرأسي باستخدام أدوات العرض العرض التوضيحي

راجع أيضًا: {مركز المحاذاة الرأسية في Bootstrap 4


التمهيد 3

طريقة Flexbox على الحاوية الخاصة بالعنصر (العناصر) المراد توسيطها:

.display-flex-center {
    display: flex;
    align-items: center;
}

تحويل أسلوب translateY:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

عرض طريقة مضمنة:

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

طريقة العرض التجريبي لـ Bootstrap 3

21
Zim

باتباع الإجابة المقبولة ، إذا كنت لا ترغب في تخصيص العلامات ، لفصل المخاوف أو لمجرد أنك تستخدم CMS ، فإن الحل التالي يعمل بشكل جيد:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

القيد هنا هو أنه لا يمكنك وراثة حجم الخط من العنصر الأصلي لأن الصف يعين حجم الخط إلى 0 لإزالة المسافة البيضاء.

21
Manuszep

اعتقدت أنني سأشارك "حل" في حال ساعده أي شخص آخر غير مطلع على استفساراتmedia بنفسه.

بفضل إجابة @ HashemQolami ، قمت ببناء بعض استعلامات الوسائط التي ستعمل على الهاتف المحمول مثل فصول col- * حتى أتمكن من تكديس col- * للجوال ولكن أعرضها محاذاة رأسياً في الوسط للشاشات الكبيرة ، على سبيل المثال.

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

ستحتاج المخططات الأكثر تعقيدًا التي تتطلب عددًا مختلفًا من الأعمدة لكل دقة شاشة (مثل صفين لـ xs و 3 لـ -sm و 4 لـ md ، وما إلى ذلك) إلى بعض finagling المتقدمة ، لكن لصفحة بسيطة تحتوي على -xs مكدسة و -sm وأكبر في الصفوف ، وهذا يعمل بشكل جيد.

20
Kevin Nelson

أفضل هذه الطريقة حسب David Walsh Vertical center CSS :

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

transform ليس ضروريًا ؛ يجد المركز أكثر دقة قليلاً. قد يكون Internet Explorer 8 أقل تركيزًا كنتيجة لذلك ، لكنه لا يزال غير سيئ -هل يمكنني استخدام - التحويلات 2d.

20
user1477388

هذا هو الحل الخاص بي. فقط أضف هذه الفئة إلى محتوى CSS الخاص بك.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

ثم يبدو HTML الخاص بك كما يلي:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>
.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>
14
Edvard Åkerberg

أنا فقط فعلت هذا ويفعل ما أريد أن أفعله.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

والآن تبدو صفحتي

<div class='container-fluid align-middle'>
    content

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------
13
Ryan Alexander

أجد فعلاً أن الشفرة التالية تعمل باستخدام Chrome وليس المتصفحات الأخرى غير الإجابة المحددة حاليًا:

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Bootply Link

قد تحتاج إلى تعديل الارتفاعات (وتحديدا على .v-center) وإزالة/تغيير div على div[class*='col-'] لاحتياجاتك.

10
babycakes

لقد واجهت نفس هذه المشكلة. في حالتي لم أكن أعرف ارتفاع الحاوية الخارجية ، لكن هكذا أصلحتها:

قم أولاً بتعيين الارتفاع لعناصر html و body بحيث تكون 100٪. هذا مهم! بدون هذا ، سيرث عنصران html و body ارتفاع أطفالهما.

html, body {
   height: 100%;
}

ثم حصلت على فئة حاوية خارجية مع:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

وأخيرا الحاوية الداخلية مع الطبقة:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML بسيط مثل:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

هذا هو كل ما تحتاجه لمحاذاة المحتويات رأسياً. التحقق من ذلك في كمان:

Jsfiddle

8
Kingsley Ijomah

إذا كنت تستخدم أقل إصدار Bootstrap ، وتجميعه في CSS بنفسك ، يمكنك استخدام بعض فئات الأداة المساعدة لاستخدامها مع فئات Bootstrap.

لقد وجدت أنها تعمل جيدًا بشكل رائع حيث أرغب في الحفاظ على استجابة نظام Bootstrap للشبكة وتكوينه (مثل استخدام -md أو -sm) ، لكنني أريد أن يكون لجميع الأعمدة في صف معين نفس الارتفاع الرأسي (بحيث يمكنني بعد ذلك محاذاة المحتوى عموديًا مع مشاركة جميع الأعمدة في الصف في وسط مشترك).

CSS/أقل:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>
7
Gerbus

ليست هناك حاجة لخلايا الجدول والجدول. يمكن تحقيقه بسهولة باستخدام التحويل.

مثال: http://codepen.io/arvind/pen/QNbwyM

الشفرة:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>
6
Arvind Bhardwaj

قمت بالتفصيل قليلاً على إجابة zessx ، من أجل تسهيل استخدامها عند مزج أحجام الأعمدة المختلفة بأحجام مختلفة للشاشة.

إذا كنت تستخدم Sass ، يمكنك إضافة هذا إلى ملف scss الخاص بك:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

الذي ينشئ CSS التالي (الذي يمكنك استخدامه مباشرة في أوراق الأنماط الخاصة بك ، إذا كنت لا تستخدم Sass):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

الآن يمكنك استخدامه على أعمدة استجابة مثل هذا:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>
6
sb.olofsson

السلوكيات المرنة معتمدة أصليًا منذ Bootstrap 4. أضف d-flex align-items-center في row div. لم تعد بحاجة إلى تعديل محتوى CSS الخاص بك.

مثال بسيط: http://jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

مع مثالك: http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

المصدر:Flex · Bootstrap

4
Mr. Robot

حسناً ، بطريق الخطأ ، قمت ببعض الحلول المختلطة ، وأخيراً ، أصبح الأمر يعمل الآن مع تخطيطي حيث حاولت إنشاء جدول 3 × 3 مع أعمدة Bootstrap بأصغر دقة ممكنة.

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>
3
godblessstrawberry
    div{
        border: 1px solid;
    }
    span{
        display: flex;
        align-items: center;
    }
    .col-5{
        width: 100px;
        height: 50px;
        float: left;
        background: red;
    }
    .col-7{
        width: 200px;
        height: 24px;

        float: left;
        background: green;
    }
    <span>
        <div class="col-5">
        </div>
        <div class="col-7"></div>
    </span>
2
Nambi N Rajan

هناك عدة طرق يمكنك القيام بها:

  1. استعمال

    display: table-cell;
    vertical-align: middle;
    

    و CSS الحاوية إلى

    display: table;
    
  2. استخدم الحشوة مع شاشة الوسائط لتغيير الحشوة بالنسبة لحجم الشاشة. شاشة Googlemedia لمعرفة المزيد.

  3. استخدام الحشو النسبي

    بمعنى ، حدد الحشوة من حيث٪

1
Amaan Iqbal

جرب هذا،

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>
1
core114

باستخدام Bootstrap 4 (الموجود في alpha حاليًا) ، يمكنك استخدام فئة .align-items-center. حتى تتمكن من الحفاظ على طابع استجابة Bootstrap. يعمل على الفور غرامة بالنسبة لي. انظر Bootstrap 4 الوثائق .

0
DiCaprio

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}
0
Pacific P. Regmi