Блог

Главная - Вопросы по программированию - невозможно управлять загрузкой 4 элементов div в адаптивный дизайн

невозможно управлять загрузкой 4 элементов div в адаптивный дизайн

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я работаю с bootstrap 4 и следующими кодами,

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css">

<div class="card-header rounded-0 border border-dark">
  <div class="row">
    <div class="col-12 col-md-4 ">
      <img src="{{asset('images/usa.jpg')}}" alt="..." class="rounded-circle">
    </div>
    <div class="col-12 col-md-8 ">
      <p>This is not a game fgfhg dfghdh dhdhdf dfgdhfhg dfdfhfh dfhdfhdf dfhdfh</p>
    </div>
  </div>
</div>

Мне нужно отображать выше двух элементов div в одной строке на большом экране, и мне нужны отдельные две строки (изображение выше, а абзац под изображением), когда он отображает мобильное устройство. Я использую следующие col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 item коды в стороне от div, но безуспешно.

как я мог справиться с этой проблемой?

Комментарии:

1. Пожалуйста, проясните вопрос. «Я использую следующие col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 коды элементов» .. где? Я не вижу этого в примере кода.

2. @Zim Я использую эти <div class="card-header rounded-0 border border-dark"> <div class="row"> <div class="col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 "> <img src="{{asset('images/usa.jpg')}}" alt="..." class="rounded-circle"> </div> <div class="col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3"> <p>This is not a game fgfhg dfghdh dhdhdf dfgdhfhg dfdfhfh dfhdfhdf dfhdfh</p> </div> </div> </div>

3. «Мне нужно отображать выше двух элементов div в одной строке на большом экране, и мне нужны отдельные две строки… когда он отображает мобильное устройство «. Ваш код делает именно это: две строки по умолчанию, одна строка на среднем (768 пикселей) или более широком экране (хотя col-12 это избыточно и может быть удалено). В чем проблема?

Ответ №1:

Просмотрите всю страницу, вы получите ее

 body {
  padding-top: 40px;
}

.col-sm-6 {
  background: #ccc;
}

.other {
  background: #a4a4a4;
}

.p {
  text-align: center;
  padding-top: 120px;
}

.p a {
  text-decoration: underline;
  color: blue;
} 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h1>Bootstrap Grid Demo</h1>
    </div>
    <div class="col-sm-6 other">
      <h1>2 Columns</h1>
    </div>
  </div>
</div>

<p class="p">Demo by Jabir Sayed. <a href="understanding-bootstrap-grid-system">See article</a>.</p>