загрузчик col изменяет размер рядом друг с другом, когда экран меньше

Question

Я пытаюсь создать адаптивный веб-макет, например:

После изменения размера я бы хотел, чтобы навыки находились рядом друг с другом под вступлением:

Проблема в основном в заставках и навыках , я не могу их достатьотрегулируйте, как я хочу: https://jsfiddle.net/aq9Laaew/20858/

HTML:

<div class="container">
  <div class="row">
    <div class="col text-center">HEAD</div>     
  </div>
  <div class="row">
    <div class="col">
      INTRO
    </div>
    <div class="col p-0">
      <div class="col m-0">SKILLS</div>
      <div class="col m-0">SKILLS</div>
      <div class="col m-0">SKILLS</div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      EDUCATION
    </div>
    <div class="col">
      EXPERIENCE
    </div>
  </div> 
  <div class="row">
    <div class="col">OTHER</div>
  </div>
</div>

CSS:

.row {
  background: #f8f9fa;
  margin:10px;
}

.col {
  border: solid 1px #6c757d;
  margin: 10px;
}

.row, .col {
   min-width: 120px;
}

Они продолжают устанавливаться друг под другом , что я только хочукогда экран дополнительный маленький .это просто, но я просто не могу понять ...

Я попытался , добавив col-4 для вступления (поскольку вступление должно расширяться шире, чем навык), и перепутал с колонками больше накоробка умений не повезло ..

Answer 1

Есть несколько проблем, которые мешают вам получить желаемую раскладку:

• cols должен быть непосредственным потомком row ... навыки, которые необходимо обернуть вдругая строка.
• Используйте col-sm, чтобы столбцы могли располагаться вертикально на меньшем макете.
• Не изменяйте поля в строках или столбцах, так как это нарушит работу сетки.

Рабочая демонстрация: https://www.codeply.com/go/0g48AjUW4E

<div class="container">
  <div class="row">
    <div class="col p-0 text-center">HEAD</div>     
  </div>
  <div class="row">
    <div class="col-sm p-0">
      INTRO
    </div>
    <div class="col-md-auto p-0">
        <div class="row no-gutters">
          <div class="col col-sm col-md-12">SKILLS</div>
          <div class="col col-sm col-md-12">SKILLS</div>
          <div class="col col-sm col-md-12">SKILLS</div>
        </div>
    </div>
  </div>
  <div class="row">
    <div class="col p-0">
      ED
    </div>
    <div class="col p-0">
      EXPERIENCE
    </div>
  </div> 
  <div class="row">
    <div class="col p-0">OTHER</div>
  </div>
</div>

CSS:

.row {
  background: #f8f9fa;
}

.col,.col-sm {
  border: solid 1px #6c757d;
}

Answer 2

Я бы использовал медиа-запрос для этого.https://www.w3schools.com/css/css3_mediaqueries.asp

То есть, оставьте ваш макет таким, каким вы хотите его сейчас, как есть, затем в медиа-запросе просто измените макет на тот, который вы хотите, чтобы он отображался при изменении размера экрана.

Answer 3

• Вам нужно обернуть skill коробки в div и присвоить им классы d-flex flex-wrap
• Таким образом, вы получите результат без предоставления отрицательного поля
• col-md-8 col-sm-12 классов в intro div сделают его 100% для меньшего устройства
• Нет необходимости вносить css изменения

.row {
  background: #f8f9fa;
  margin:10px;
}

.col {
  border: solid 1px #6c757d;
  margin: 10px;
}

.row, .col {
   min-width: 120px;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col text-center">HEAD</div>     
  </div>
  
  <!-- Changes here -->
  <div class="row">
      <div class="col-md-8 col-sm-12">
        INTRO
      </div>
      <div class="col p-0">
        <div class="d-flex flex-wrap">
          <div class="col-4 col-md-12 m-0">SKILLS</div>
          <div class="col-4 col-md-12 m-0">SKILLS</div>
          <div class="col-4 col-md-12 m-0">SKILLS</div>
        </div>
      </div>
    </div>
   <!-- Changes Ends here --> 
   
  <div class="row">
    <div class="col">
      EDUCATION
    </div>
    <div class="col">
      EXPERIENCE
    </div>
  </div> 
  <div class="row">
    <div class="col">OTHER</div>
  </div>
</div>

Answer 4

Во-первых, когда вы разделяете на несколько столбцов, вы должны обернуть их внутри row (чтобы у вас было display:flex)

Во-вторых, вам нужно добавить классы в ваши столбцы, чтобы установить, как вы хотите ихпоявляться на экранах разных размеров.Обратите внимание, что по состоянию на bootstrap4 col-xs не существует.Вместо этого используйте col simple и замените его на больших экранах.

В приведенном ниже примере я использовал:

col-lg-8 и col-12 в разделе INTRO.

col-lg-4 и col-12 в оболочке Skills.

col-lg-12 и col-4 в столбцах Skills.

Также добавлена ​​строка для переноса столбцов Skills

См. Ниже или jsFIddle

.row {
  background: #f8f9fa;
  margin: 10px;
}

[class*="col-"] {
  border: solid 1px #6c757d;
}

.row,
[class*="col-"] {
  min-width: 120px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col text-center">HEAD</div>
  </div>
  <div class="row">
    <div class="col-lg-8 col-12">
      INTRO
    </div>
    <div class="col-lg-4 col-12 p-0">
      <div class="row mx-0">


        <div class="col-lg-12 col-4 m-0">SKILLS</div>
        <div class="col-lg-12 col-4 m-0">SKILLS</div>
        <div class="col-lg-12 col-4 m-0">SKILLS</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      EDUCATION
    </div>
    <div class="col">
      EXPERIENCE
    </div>
  </div>
  <div class="row">
    <div class="col">OTHER</div>
  </div>
</div>