Самозагрузка 4 Grid, укладка 4 элементов в ряд с нестандартным горизонтальным желобом - PullRequest
Новая
       28

Самозагрузка 4 Grid, укладка 4 элементов в ряд с нестандартным горизонтальным желобом

0 голосов
/ 03 октября 2018

Я пытаюсь выложить 4 элемента в ряд с произвольным горизонтальным желобом, я пытался поместить каждый элемент в столбец с классом col-md-2 для определенного размера экрана и изменить поля справа для каждого элемента.мне нужно ... но это выглядело не очень хорошо, при применении col-md-3, очевидно, нет места для добавления поля для каждого элемента, удивительно, когда я пытался применить класс col-md-2.5, он работал на больших экранах, однако, когда я хочу, чтобы размер элемента составлял до 10 столбцов на меньших экранах, это так, но когда я возвращаюсь к большему экрану, он снова ведет себя как маленький экран, вот мой HTML-код, и я оставлю скриншот внизниже, чтобы проиллюстрировать поведение, которое я хочу. 

[class^="col"]:not(:last-child){
    margin-right: 60px;
  }
<div class="container">
    <div class="row">
        <div class="col col-md-2.5">1</div>
        <div class="col col-md-2.5">2</div>
        <div class="col col-md-2.5">3</div>
        <div class="col col-md-2.5">4</div>
    </div>
</div>

<!--I know it may look weird but this above HTML along with the CSS 
achieved my goal on the big screens -->

<!-- things get messy again when i do the following to adjust the 
view of elements on smaller screens -->

<div class="container">
    <div class="row">
        <div class="col-10 offset-1 col-md-2.5">1</div>
        <div class="col-10 offset-1 col-md-2.5">2</div>
        <div class="col-10 offset-1 col-md-2.5">3</div>
        <div class="col-10 offset-1 col-md-2.5">4</div>
    </div>
</div>

<!-- it works fine in small screen, but when I back to big 
screens with this set up, it doesn't give me the initial 
behavior and spans every element to columns !!

Вот скриншот желаемого поведения

enter image description here

спасибо заранее!

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Я не совсем понял вашу проблему.Вы только что попробовали просто применить отступы слева и справа от 4-х колонок, используя обозначение {property}{sides}-{breakpoint}-{size}?

https://getbootstrap.com/docs/4.1/utilities/spacing/#notation

Таким образом, вам не нужно использовать offset наваши столбцы.Вместо этого вы можете просто использовать col.

Например, если вы хотите использовать большие левые и правые отступы на больших экранах, вы можете применить px-lg-5 к классу col. 

<div class="container">
    <div class="row">
        <div class="col px-lg-5">
            ...
        </div>
        <div class="col px-lg-5">
            ...
        </div>
        <div class="col px-lg-5">
            ...
        </div>
        <div class="col px-lg-5">
            ...
        </div>
    </div>
</div>

jsfiddle: http://jsfiddle.net/aq9Laaew/241204/

0 голосов
/ 03 октября 2018

Вам не хватает целевого экрана: 

<div class="container">
    <div class="row">
        <div class="col-10 offset-1 col-md-2.5">1</div>
        <div class="col-10 offset-1 col-md-2.5">2</div>
        <div class="col-10 offset-1 col-md-2.5">3</div>
        <div class="col-10 offset-1 col-md-2.5">4</div>
    </div>
</div>

Добавьте любой желаемый размер: xs, sm, md, lg к столбцу и смещение, как это: 

<div class="container">
    <div class="row">
        <div class="col-10 col-sm-offset-1 col-md-2.5">1</div>
        <div class="col-10 col-sm-offset-1 col-md-2.5">2</div>
        <div class="col-10 col-sm-offset-1 col-md-2.5">3</div>
        <div class="col-10 col-sm-offset-1 col-md-2.5">4</div>
    </div>
</div>

Вот ссылка: https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

РЕДАКТИРОВАТЬ: похоже, вам, возможно, придется указать, на какой экран вы ориентируетесь при использовании класса смещения.Но вы правы, что вам не нужен другой вариант.

...