Не может быть, чтобы 3 элемента плавали рядом друг с другом

ProgramBox

Не может быть, чтобы 3 элемента плавали рядом друг с другом

Post author:admin
Запись опубликована:26 марта, 2023
Post category:Вопросы по программированию

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

У меня небольшая проблема, я хочу разместить 3 раздела рядом друг с другом, но по некоторым причинам (используя класс начальной загрузки col-md-4) 3-й раздел переходит на следующую строку при добавлении любого поля — верно, как я могу это исправить? https://jsfiddle.net/rpu6szv0 / `

 <section id="FirstSection"  class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Chicken</h3>
dummy text


<a href="#Page-Header">Back To top</a>
</section>
<section id="SecondSection" class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Beef</h3>
    dummy text

<a href="#Page-Header">Back To top</a>
</section>

<section id="ThirdSection"  class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Sushi</h3>
    dummy text

<a href="#Page-Header">Back To top</a>
</section>
</div>`

Уменьшено 3 раздела

1. Спасибо за предоставление скрипки. Когда я пробую это, разделы оказываются вертикально один над другим, не так, как на вашем изображении. Есть ли какие-то другие вещи, которые следует включить (вы упоминаете bootstrap)? Редактировать: я только что видел ответ @Rounin — flex — хороший способ пойти в наши дни.

2. margin-right: 1px — это ваша проблема, удалите ее: jsfiddle.net/y9px6z1q

Ответ №1:

Я хочу разместить 3 раздела рядом друг с другом

Более продвинутой и более современной альтернативой float является flexbox.

Вы можете думать о flexbox как о float с суперспособностями.

Историческая справка: Платформа Twitter Bootstrap была запущена в 2011 году, за несколько лет до того, как был завершен CSS Flexbox.

Это правда, что Bootstrap упростил создание определенных макетов в CSS по сравнению с подходами, доступными в 2011 году.

Но, как говорится в Википедии:

В 2010-х годах интенсивное использование популярных фреймворков верстки JavaScript, таких как Bootstrap, вдохновило спецификации CSS flex-box и grid layout.

Источник: https://en.wikipedia.org/wiki/CSS_Flexible_Box_Layout#History

Сегодня CSS Flexbox (и CSS Grid) даже упрощают создание этих макетов, чем Bootstrap.

В примере ниже у меня есть:

учитывая родительский (в данном случае body ) display: flex
учитывая дочерние элементы (в данном случае, section ) a flex: 1 1 33%

Второе свойство имеет решающее значение.

flex является сокращенным свойством, которое указывает:

скорость, с которой элемент может расти (в данном случае 1 )
скорость, с которой элемент может сжиматься (в данном случае 1 )
начальная ширина (в данном случае 33% )

Это означает, что при прочих равных условиях элемент будет занимать 33% все доступное пространство (в данном случае ширину body ), но если вы добавите отступы, границы, поля и т.д. элемент может сжиматься, так что строка элементов в конечном итоге не занимает больше доступного пространства.

Рабочий пример:

 body {
  display: flex;
}

section {
  flex: 1 1 33%;
  text-align: center;
}

 <section id="FirstSection">
<h3>Chicken</h3>
<p>dummy text</p>
<p><a href="#Page-Header">Back To Top</a></p>
</section>

<section id="SecondSection">
<h3>Beef</h3>
<p>dummy text</p>
<p><a href="#Page-Header">Back To Top</a></p>
</section>

<section id="ThirdSection">
<h3>Sushi</h3>
<p>dummy text</p>
<p><a href="#Page-Header">Back To Top</a></p>
</section>

1. Это действительно помогает частично решить мою проблему. Мне все еще нужно, чтобы они имели разную ширину в разных точках останова, например, когда она достигает определенной ширины в пикселях, я хочу, чтобы разделы имели разную форму, т. Е. 2 раздела в 1 строке и 3-й раздел в целом ряду

2. Да, для этого вы можете использовать CSS @media запросы типа @media only screen and (max-width: 868px) { [... Your CSS for 2 sections in 1 row and the 3rd section in a whole row Here...] }

3. итак, мне придется вручную определять ширину каждого столбца внутри медиа-запросов и добавлять этот класс к элементу, верно?

4. Вы будете, да — хотя, если одинаковые значения ширины в процентах применяются к нескольким классам, вам нужно будет выписать эти значения ширины только один раз: .class-1, .class-3 { [... Percentage-based width applying to .class-1 amp; .class-3...] } Конечно, неплохо присвоить большинству ваших элементов индивидуальность class или id в любом случае — но вы уже сделали это со своими id s, так что вы впереди игры.

5. Проблема в том, что если я вручную укажу ширину для каждого столбца, я в основном не использую столбцы начальной загрузки, и мне нужно использовать классы начальной загрузки, особенно столбцы, есть ли другой способ?

Ответ №2:

Наиболее эффективным решением является сохранение col-md-3 для всех разделов и использование offset-md-1 для интервала

1. Да, но я не понимаю, почему все они не будут плавающими слева, они имеют одинаковую ширину, и у меня уже есть определенный размер поля для рамки, поэтому он должен быть исправлен сам по себе, не так ли?

2. @Kermit box-размер включает границу и отступы, а не поля. удалите поле: jsfiddle.net/y9px6z1q

3. @G-Cyrillus В этом весь смысл, я пытаюсь оставить некоторое пространство между каждым разделом, но это не позволит, я думаю, что оно едва подходит для добавления поля. Есть ли что-нибудь вокруг этого?

4. @Kermit вы можете использовать класс col вместо col-x getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns , я сделал ответ с демонстрационным фрагментом.

Ответ №3:

из вашего комментария

@G-Cyrillus В этом весь смысл, я пытаюсь оставить некоторое пространство между каждым разделом, но это не позволит, я думаю, что оно едва подходит для добавления поля. Есть ли что-нибудь вокруг этого?

если ad margin , классы col-x, определяющие размер ваших столбцов, должны быть удалены для простого класса col , который будет расти внутри комнаты, оставленной для него . Вместо col-md-4 вы можете использовать класс col-md для второго столбца, он будет увеличиваться и уменьшаться, чтобы поместиться между 2 другими и позволить вам добавлять поля :

пример

 * {
  box-sizing: border-box;
}

#FirstSection,
#SecondSection,
#ThirdSection {
  font-size: 120%;
  font-weight: bold;
  background-color: #C0C0C0;
  height: 1700px;
  margin-right: 10px;
  overflow: auto;
  margin-left: auto;
  padding: 10px;
  clear: none;
}

.SectionHeader {
  font-size: 1.5em;
  font-weight: bold;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <section id="FirstSection" class="col-md-4  col-sm-12 col-xs-12">
      <h3 class="SectionHeader text-center">Chicken</h3>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
      Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
      Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
      mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
      metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis
      arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.


      <a href="#Page-Header">Back To top</a>
    </section>
    <section id="SecondSection" class="col-md  col-sm-12 col-xs-12">
      <h3 class="SectionHeader text-center">Beef</h3>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
      Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
      Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
      mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
      metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis
      arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.

      <a href="#Page-Header">Back To top</a>
    </section>
    <section id="ThirdSection" class="col-md-4  col-sm-12 col-xs-12">
      <h3 class="SectionHeader text-center">Sushi</h3>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
      Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
      Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
      mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
      metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.

      <a href="#Page-Header">Back To top</a>
    </section>
  </div>
</div>

смотрите: https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns