ایجاد سه ستون مساوی در بوت استرپ

به مثال زیر دقت کنید؛ همان طور که مشاهده می کنید، ابتدا با استفاده از کلاس row یک ردیف در صفحه ایجاد کرده ایم، و سپس این ردیف را در تبلت ها( که از کلاس sm استفاده می کنند ) به سه ستون مساوی تقسیم کرده ایم. اگر به کلاس هریک از این ستون ها دقت کنید، مشاهده می کنید که اول کلمه ی col آمده است و سپس کلمه ی sm و سپس عدد 4 آمده است. کلمه ی sm و عدد 4 پس از آن، مشخص می کنند که این ستون در تبلت ها و بالاتر،چهار ستون واحد را اشغال کند. دقت کنید که همواره باید جمع این اعداد پس از کلمه ی sm (یا هر کلاس دیگری) برابر با 122 باشد. پس الان ما یک ردیف داریم که در داخل آن سه ستون مساوی وجود دارند. البته باید گفت که این سه ستون، تنها در تبلت ها به بالا نمایش داده می شوند. و در موبایل ها چون هنوز کلاسی برای آن تعریف نکرده ایم، به طور اتوماتیک این ستون ها دسته بندی می شوند.

مثال (شبکه بندی مقدماتی بوتسترپ)

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

خودتان امتحان کنید »