Корректируем ширину колонки с помощью смещения в Bootstrap

Давайте посмотрим уже готовый пример. Наша задача — увеличить расстояние между двумя блоками.

Конечно, мы можем принудительно задать больший padding, но мы все-таки изучаем Bootstrap, поэтому давайте как бы колонку.

Было

<aside class="col-lg-3 col-sm-4">
    <h3>Keeping your pet's chompers clean and healthy</h3>
    <p>You know the importance of brushing your own teeth, but did you know that dogs and cats also need regular attention to their pearly whites? Poor dental hygiene in pets can lead to periodontal disease, a bacterial infection which causes bad breath, drooling, tooth decay, and tooth loss.</p>
    <p>As always, if you have questions about your pet’s dental or health care, please <a href="#">contact Wisdom Pet Medicine</a> for advice.</p>
 </aside>
<article class="col-lg-9 col-sm-8">
    <h1>Services</h1>
    <p><img src="img/cockatiel.jpg" class="pull-right">Wisdom Pet Medicine is a state-of-the-art veterinary hospital,   featuring the latest in diagnostic and surgical equipment, and a staff   of seasoned veterinary specialists in the areas of general veterinary   medicine and surgery, oncology, dermatology, orthopedics, radiology,   ultrasound, and much more. We also have a 24-hour emergency clinic in   the event your pet needs urgent medical care after regular business   hours.</p>
    <p>At Wisdom, we strive to be your pet&rsquo;s medical experts from youth   through the senior years. We build preventative health care plans for   each and every one of our patients, based on breed, age, and sex, so   that your pet receives the most appropriate care at crucial milestones   in his or her life. Our overarching goal is to give your pet the best   shot possible at a long and healthy life, by practicing simple   preventative care. We even provide an online Pet Portal where you can   view all your pet&rsquo;s diagnostic results, treatment plans, vaccination and   diagnostic schedules,  prescriptions, and any other health records.</p>
</article>

Стало

<aside class="col-lg-3 col-sm-4">
    <h3>Keeping your pet's chompers clean and healthy</h3>
    <p>You know the importance of brushing your own teeth, but did you know that dogs and cats also need regular attention to their pearly whites? Poor dental hygiene in pets can lead to periodontal disease, a bacterial infection which causes bad breath, drooling, tooth decay, and tooth loss.</p>
    <p>As always, if you have questions about your pet’s dental or health care, please <a href="#">contact Wisdom Pet Medicine</a> for advice.</p>
 </aside>
<article class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1">
    <h1>Services</h1>
    <p><img src="img/cockatiel.jpg" class="pull-right">Wisdom Pet Medicine is a state-of-the-art veterinary hospital,   featuring the latest in diagnostic and surgical equipment, and a staff   of seasoned veterinary specialists in the areas of general veterinary   medicine and surgery, oncology, dermatology, orthopedics, radiology,   ultrasound, and much more. We also have a 24-hour emergency clinic in   the event your pet needs urgent medical care after regular business   hours.</p>
    <p>At Wisdom, we strive to be your pet&rsquo;s medical experts from youth   through the senior years. We build preventative health care plans for   each and every one of our patients, based on breed, age, and sex, so   that your pet receives the most appropriate care at crucial milestones   in his or her life. Our overarching goal is to give your pet the best   shot possible at a long and healthy life, by practicing simple   preventative care. We even provide an online Pet Portal where you can   view all your pet&rsquo;s diagnostic results, treatment plans, vaccination and   diagnostic schedules,  prescriptions, and any other health records.</p>
</article>

Все отличие у нас только в одной строке

<article class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1">

И так, что же мы сделали

  1. У нас было col-lg-9 стало col-lg-8, было col-sm-8 стало col-sm-7. Т.е. мы убрали по одной колонке у всех типов сетки, т.к. теперь нам нужно добавить колонку-разделитель.
  2. Так же мы добавили col-lg-offset-1 и col-sm-offset-1, что означает смещение на одну колонку влево. Мы всегда задаем данный класс у правого блока. Если бы у нас были еще другие типы сеток, то для них мы написали бы подобный класс.

Вот и все, давайте посмотрим готовое демо, а кто хочет, может скачать урок.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll Up
Adblock detector