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


Answers

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

مع ظهور 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.

Question

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




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

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

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

رابط JsFiddle

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

W3Schools - تعويم




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

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

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

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

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------



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



إذا كنت تستخدم الإصدار 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>



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




    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>




جرب هذا،

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




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




جرب هذا في CSS div:

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



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