0

Здравствуйте.
Я начинаю изучать бутстрап и у меня возник вопрос.
Я хочу чтобы часть сайта выглядела вот так:
http://5.firepic.org/5/images/2015-08/26/drwojon9n86p.png
Слева картинка, справа большой и маленькие тексты.
Но я хочу подвинуть тексты правее. Как правильнее это сделать? Вот такой у меня код

  <div id="about">
  <div class="row">
    <div class="col-md-4">
        <img class="img-responsive" src="img/about.jpg"/>
      </div>
      <div class="container">
        <h2 class="title">About me</h2>
        <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat.
          Purto brute disputando cu est, eam dicam soluta ei.
          Vel dicam vivendo accusata ei, cum ne periculis molestiae pri. </p>
        <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat.
          Purto brute disputando cu est, eam dicam soluta ei.</p>
            <div class="col-xs-6">
                  <div class="row wrap">
                      <div class="col-xs-6"><h4 class="title">Web Design</h4>
                        <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam.</p>
                      </div>
                      <div class="col-xs-6"><h4 class="title">Online Marketing</h4>
                        <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam.</p>
                      </div>
                      <div class="col-xs-6"><h4 class="title">Graphic Design</h4>
                        <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam.</p>
                      </div>
                      <div class="col-xs-6"><h4 class="title">SEO</h4>
                        <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam.</p>
                      </div>
                  </div>
              </div>
        </div>
    </div>
</div>
</div>
1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 26 авг 2015 в 14:46

1 ответ 1

0
<div id="about">
    <div class="row">
        <div class="col-md-4">
            <img class="img-responsive" src="img/about.jpg"/>
        </div>
        <div class="container">
            <div class="row ">
                <div class="col-md-6 col-md-offset-2">
                    <h2 class="title">About me</h2>
                    <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat.
                        Purto brute disputando cu est, eam dicam soluta ei.
                        Vel dicam vivendo accusata ei, cum ne periculis molestiae pri. </p>
                    <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat.
                        Purto brute disputando cu est, eam dicam soluta ei.</p>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-xs-5"><h4 class="title">Web Design</h4>
                                    <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam.</p>
                                </div>
                                <div class="col-xs-5 col-md-offset-2"><h4 class="title">Online Marketing</h4>
                                    <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam.</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-5"><h4 class="title">Graphic Design</h4>
                                    <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam.</p>
                                </div>
                                <div class="col-xs-5 col-md-offset-2"><h4 class="title">SEO</h4>
                                    <p>Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
1
  • Если промежуток нужен меньше, можно поменять col-md-offset-2 на col-md-offset-1 в случае первого использования. Удачи.
    – Stas
    26 авг 2015 в 14:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.