0

Здравствуйте. Мне необходимо поставить параграф на уровне заголовка, но почему-то col-md-1-12 занимает целую строчку, как можно это реализовать?

введите сюда описание изображения

Необходимый результат:

введите сюда описание изображения

            <div class="col-2">
                <h2>1</h2>
            </div>
            <div class="col-4">
                <p>Досуговый центр "Вертикальный взлет"
                ул. Твардовского, 8, к. 1, Москва, 123458</p>
            </div>

            <div class="col-md-2">
                <h2>2</h2>
            </div>
            <p>Досуговый центр "Вертикальный взлет"
                ул. Твардовского, 8, к. 1, Москва, 123458</p>
2
  • ЗЫ, col-md-1-12 так же не работает, инспектор говорит о: imgur.com/a/laDwY
    – user234223
    Commented 23 сент. 2017 в 14:33
  • А ни чего, что вёрстка не семантична? Если пересмотреть подход в вёрстке, то и проблемы вообще не будет. И не нужны вам будут для прописывания адреса заголовки для указания пункта. И, соответственно, легко внедрите микроразметку в последующем. Commented 12 мая 2018 в 5:46

3 ответа 3

1

Вариант 1 ,именно, с колонками:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" >

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2 class="text-uppercase font-weight-bold mb-4">Контакты:</h2>
      
      <div class="row">
        <div class="col-1">
          <h3>1</h3>
        </div>
        <div class="col-10">
          <p>Досуговый центр "Вертикальный взлет"
            ул. Твардовского, 8, к. 1, Москва, 123458</p>
        </div>
      </div>
      
      <div class="row">
        <div class="col-1">
          <h3>10</h3>
        </div>
        <div class="col-10">
          <p>Досуговый центр "Вертикальный взлет"
            ул. Твардовского, 8, к. 1, Москва, 123458</p>
        </div>
      </div>
    </div>
    
    <div class="col-md-6">
      <img src="https://images.unsplash.com/photo-1466096115517-bceecbfb6fde?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=427bcc1d8e2505d31a239d0de6b13f75&auto=format&fit=crop&w=1050&q=80" alt="" class="img-fluid">
    </div>
  </div>
</div>  

Вариант 2 с d-flex. Разница видна, если контактов будет 10 и больше:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" >

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2 class="text-uppercase font-weight-bold">Контакты:</h2>
      
      
      <div class="d-flex">
        <h3 class="mr-4">1</h3>
        
        <p>
          Досуговый центр "Вертикальный взлет" <br>
          ул. Твардовского, 8, к. 1, Москва, 123458
        </p>
      </div>
      
      <div class="d-flex">
        <h3 class="mr-4">2</h3>
        
        <p>
          Досуговый центр "Вертикальный взлет" <br>
          ул. Твардовского, 8, к. 1, Москва, 123458
        </p>
      </div>
      
      <div class="d-flex">
        <h3 class="mr-4">10</h3>
        
        <p>
          Досуговый центр "Вертикальный взлет" <br>
          ул. Твардовского, 8, к. 1, Москва, 123458
        </p>
      </div>
    </div>
    
    <div class="col-md-6">
      <img src="https://images.unsplash.com/photo-1466096115517-bceecbfb6fde?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=427bcc1d8e2505d31a239d0de6b13f75&auto=format&fit=crop&w=1050&q=80" alt="" class="img-fluid">
    </div>
  </div>
</div> 

0

Как то так. Открыть на всю страницу.

.btn-circle {
  background-color: blue;
  height: 50px;
  width: 50px;
  border-radius: 50% !important;
}

.btn-circle a {
  display: block;
  width: 10px;
  height: 20px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.btn-circle img {
  width: 100%;
  height: 100%;
}

.btn-lg.round {
  border-radius: 24px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="container">
  <!-- Content here -->

  <div class="row">
    <div class="col-2">
      <h2>1</h2>
    </div>
    <div class="col-4">
      <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p>
    </div>
    <div class="col-4">
      <img src="http://via.placeholder.com/350x150g" class="float-left">
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <h2>2</h2>
    </div>
    <div class="col-md-4">
      <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <button type="button" class="btn btn-primary btn-lg round">Primary course online</button>
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-primary btn-circle"><i class="fas fa-phone"></i></button>

    </div>


  </div>

0

Если я правильно Вас понял, то вот так:

<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />

<div class="row ">
  <div class="col-md-1">
    <h2>1</h2>
  </div>
  <div class="col-md-4">
    <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p>
  </div>
</div>
<div class="row ">
  <div class="col-md-1">
    <h2>2</h2>
  </div>
  <div class="col-md-4">
    <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p>
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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