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



html tags (18)

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

لقد وجدت هذه للعمل بشكل جيد بشكل خيالي حيث أريد الحفاظ على الاستجابة والتشكيل لنظام الشبكة Bootstrap (مثل استخدام -sm أو -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>

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

<!-- 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 لإصلاحه ، ولكن أعتقد أن هذا ليس حلاً جيدًا للتصميم سريع الاستجابة.


Answer #1

لا حاجة للجدول وخلايا الجدول. يمكن تحقيقه بسهولة باستخدام التحويل. مثال: 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>


Answer #2

لقد تحدثت قليلاً عن إجابة 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>

Answer #3

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


Answer #4

لقد واجهت نفس الموقف حيث كنت أرغب في محاذاة بعض عناصر div رأسيًا على التوالي ووجدنا أن فئات Bootstrap col-xx-xx تطبق أسلوب div على النحو float: left.

اضطررت إلى تطبيق النمط على عناصر div مثل style = "Float: none" وبدأت جميع عناصر div الخاصة بي بمحاذاة رأسية. هذا مثال العمل:

<div class="col-lg-4" style="float:none;">

رابط JsFiddle

فقط في حالة ما إذا كان هناك من يريد قراءة المزيد عن الخاصية العائمة:

W3Schools - تعويم


Answer #5

جرب هذا في CSS div:

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

Answer #6

تحديث 2018

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

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

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

Bootstrap 4

والآن بعد أن يكون BS4 هو صندوق المرآة بشكل افتراضي ، هناك العديد من الطرق المختلفة للمحاذاة العمودية باستخدام: auto-margins تلقائية ، أو ملفات flexbox ، أو أدوات العرض مع محاذاة عمودية . في البداية يبدو "محاذاة العمودية" واضحة ولكن هذه فقط تعمل مع عناصر العرض المضمنة والجدول. فيما يلي بعض خيارات توسيط عمودي 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>

BS4 - مركز رأسي باستخدام auto-margins Demo

تمثل my-auto هوامش على المحور y الرأسي وهي تعادل:

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

2 - المركز الرأسي مع Flexbox:

منذ 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>

BS4 - مركز عمودي مختلف أعمدة الارتفاع

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

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

<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>

BS4 - مركز رأسي يستخدم أداة العرض التجريبي

انظر أيضًا: Vertical Align Center في Bootstrap 4

Bootstrap 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;
}

عرض من 3 طرق توسيط Bootstrap


Answer #7

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

قم أولاً بتعيين الارتفاع الخاص بـ html والعناصر الأساسية بحيث تكون 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


Answer #8

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

.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 لإزالة المسافة البيضاء.


Answer #9

أفضل هذه الطريقة وفقًا لمركز David Walsh Vertical CSS :

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

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


Answer #10

أجد بصدق أن الشفرة التالية تعمل باستخدام 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

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


Answer #11

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

1.

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

و CSS للحاوية

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

  2. استخدام الحشو النسبي ، أي حدد الحشو من حيث النسبة المئوية

آمل أن يساعد


Answer #12

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

رابط العروض التوضيحية:
- 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 مساحات). و حينئذ...

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

<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> مساحة في المخطط ، وتكسر نظام الشبكة.

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


Answer #13

تخطيط مربع مرن

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

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

- CSS الأسطوري إيريك ماير في W3Conf 2013

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

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

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

عمودي محاذاة الأعمدة

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

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

<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;
}

الإخراج

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

توضيح على align-items: center

align-items

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

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

تنبيه كبير

ملاحظة مهمة رقم 1: لا يحدد 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;
    }
}

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

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

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

إذا قمت بالنقر فوق "Toggle Compiled View" في العرض التوضيحي ، فسترى الإصدار Autoprefixer من تعريفات 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  */
}

الإخراج

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

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

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

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


Answer #14

حسنًا ، لقد قمت عن طريق الخطأ بخلط بعض الحلول ، وأخيرًا تعمل الآن على تخطيطي حيث حاولت إنشاء جدول 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>


Answer #15

جرب هذا،

.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>


Answer #16

    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>


Answer #17

ظننت أنني سأشارك "الحل" الخاص بي في حالة مساعدة أي شخص آخر غير مطلع على استفسارات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;
    }
}

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





twitter-bootstrap-3