Давайте посмотрим уже готовый пример. Наша задача — увеличить расстояние между двумя блоками.
Конечно, мы можем принудительно задать больший 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’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’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’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’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">
И так, что же мы сделали
- У нас было col-lg-9 стало col-lg-8, было col-sm-8 стало col-sm-7. Т.е. мы убрали по одной колонке у всех типов сетки, т.к. теперь нам нужно добавить колонку-разделитель.
- Так же мы добавили col-lg-offset-1 и col-sm-offset-1, что означает смещение на одну колонку влево. Мы всегда задаем данный класс у правого блока. Если бы у нас были еще другие типы сеток, то для них мы написали бы подобный класс.
Вот и все, давайте посмотрим готовое демо, а кто хочет, может скачать урок.