كيفية محاذاة 3 مربعات في تويتر التمهيد أفقيا?

Question

أنا بحاجة إلى إدراج 3 مربعات بجانب بعضها البعض في وورد موضوع.أنا باستخدام wp-موضوع التمهيد.

ماذا فعلت أنا إنشاء صفحة و أنا سميت "العروض" و كتبت البرمجية التالية

<div class="col-xs-4 text-center offer-box">
    <h1>Offer 1</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
    </div>

    <div class="col-xs-4 text-center offer-box">
    <h1>Offer 2</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
    </div>

    <div class="col-xs-4 text-center offer-box">
    <h1>Offer 3</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
    </div>

في ملف css, كتبت

.offer-box {
    background: #f4e759;
    height: 300px;
    border-radius: 10px;
}

.offer-box h1 {
    color: #080808;
}

.offer-box p {
    color: #080808;
    font-size: 1.2em;
}

يعمل ولكن تظهر مربعات دون هامش.أريد أن تجعل مع الهوامش اليمنى واليسرى لكل مربع.

يجب أن تظهر مثل هذه الصورة بالضبط

Answer 1

أولا يجب أن التفاف الأعمدة في صف واحد. <div class="row"></div> يجب إدراج آخر <div> في يور أعمدة التصميم الأغراض لأن

الأعمدة إنشاء المزاريب (الفجوات بين العمود المحتوى) عن طريق الحشو.أن الحشو هو تعويض في الصفوف الأولى و العمود الأخير عبر السلبية الهامش .الصفوف.

جرب هذا

<div class="row">
<div class="col-xs-4">
  <div class="text-center offer-box">
    <h1>Offer 1</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
                ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
                Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
                dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
                tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
                tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<div class="col-xs-4">
 <div class="text-center offer-box">
    <h1>Offer 2</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
                ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
                Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
                dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
                tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
                tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
   </div>
  </div>  
  <div class="col-xs-4">
   <div class="text-center offer-box">
    <h1>Offer 3</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
                ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
                Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
                dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
                tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
                tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  </div>
 </div>
</div>

التحقق من هذا الارتباط أيضا للحصول على مزيد من الأمثلة التمهيد نظام الشبكة

Answer 2

تحتاج إلى تعيين المتغيرات المناسبة في النمط الخاص بك.ملف أقل.أعتقد تلك التي كنت بحاجة إلى أن ننظر إلى

@fluidGridColumnWidth

و

@fluidGridGutterWidth 

Answer 3

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

Answer 4

يرجى مراجعة ما يلي:

الصفوف يجب أن توضع داخل .حاوية (عرض ثابت) أو .حاوية السائل (ذات العرض الكامل) المحاذاة الصحيحة و الحشو.

استخدام الصفوف لخلق الأفقي مجموعات من الأعمدة.

المحتوى يجب أن توضع داخل الأعمدة الأعمدة فقط قد تكون فورية الأطفال من الصفوف.

الأعمدة إنشاء المزاريب (الفجوات بين العمود المحتوى) عن طريق الحشو.أن الحشو هو تعويض في الصفوف الأولى و العمود الأخير عبر السلبية الهامش .الصفوف.

قراءة