Как я могу добиться этого адаптивного дизайна без использования элемента контейнера?

Question

Я хочу go для следующих макетов с этим кодом. Вот примерная иллюстрация:

I also added a media query for mobile layout which will just stack the elements on top of one another.

My Code

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

Но есть ли способ добиться желаемых макетов без изменения структуры существующий HTML?

Когда я проверяю с помощью Chrome Dev Tools, я вижу, что есть ряд проблем.

1. Правое поле сжимается с правым краем screen на минимизации ширины экрана путем перетаскивания окна.
2. Макеты не достигаются с использованием измерений с 12 сетками, и если, например, я делаю ширину менее 100% для моего медиа-запроса на рабочем столе, это как-то подходит, но я полагаю, это ужасно неправильно.
3. Для макета планшета я не могу заставить третий элемент секции растягиваться на всю ширину экрана, хотя я поместил его в отдельный ate <div элемент с <div class = "width">.

Итак, изменение структуры на что-то вроде этого - единственный способ go?

<div class="row">
            <div class="container col-lg-4 col-md-6 col-sm-12">
                <section> 
                    <div id="beef" >Beef</div>
                    <p>
                    Lorem ipsum...
                    </p>
                </section>
            </div>
    </div> 

Изменить: фреймворк CSS не используется.

Answer 1

то, что вы спросили (является ли элемент контейнера абсолютно необходимым для адаптивного дизайна?) Да, это правда, чтобы сделать веб-сайт адаптивным, мы используем контейнер, переходя к следующей части, в которой вы хотите, чтобы элементы меню выглядели в этом (https://i.stack.imgur.com/OAmDC.png) был прав? поэтому я проверил код, который вы отправили туда, где вы написали это, был

<div class="row">
    <section class="col-sm-12 col-md-6 col-lg-4">

        <section class="secheader" id="head1">name</section>
          description
    </section>
</div>

аналогично для всех элементов, поэтому помните одну вещь, когда вы хотите показать некоторые элементы рядом, вы должны сохранить все это один раз div, так что instaide что все будет рядом (извините, мое объяснение может быть непонятным) обратитесь к этому https://getbootstrap.com/docs/4.1/layout/grid/, чтобы вы могли писать таким образом

<div class="container ">
    <div class="row">
       <div class="col-4">
          <h3>iteam 1</h3>
          <p>description</p>
       </div>
       <div class="col-4">
          <h3>iteam 2</h3>
          <p>description</p>
       </div>
       <div class="col-4">
          <h3>iteam 3</h3>
          <p>description</p>
       </div>
    </div>
 </div>

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

Answer 2

Поскольку вы добавляете отступы и поля в свой раздел, это конфликтует с классами bootstrap (col-xx), поэтому, если вы не хотите переписывать свой css, вам нужно поместить классы начальной загрузки в оболочку div и поместить их все в том же ряду вот так:

 <div class="row">
        <div class= "col-sm-12 col-md-6 col-lg-4">
   
            <section>

                <section class="secheader" id="head1">Chicken</section>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </section>
        </div>
        <div class= "col-sm-12 col-md-6 col-lg-4">

            <section>

                <section class="secheader" id="head2">Beef</section>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </section>
        </div>
        
        <div class= "col-sm-12 col-md-12 col-lg-4">

             <section>

                <section class="secheader" id="head3">Sushi</section>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </section>
        </div>
    </div>