1

Хотел разобратся как работает сетка бутстрапа на своем примере, но никак не могу придумать как менять аквивный класс для определенного разрешения. Вот пример для одного разрешения. Как стоило бы применять тот же ^col-xs- для другого разрешения

.row:after {
  display: block;
  clear: both;
  content: ''; }

.row + .row {
  margin-top: 3%; }

[class^="col-"] {
  float: left;
  margin-right: 3%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  [class^="col-"]:last-child {
    margin-right: 0%; }

.col-md-1 {
  width: 5.58333%; }

.col-md-2 {
  width: 14.16667%; }

.col-md-3 {
  width: 22.75%; }

.col-md-4 {
  width: 31.33333%; }

.col-md-5 {
  width: 39.91667%; }

.col-md-6 {
  width: 48.5%; }

.col-md-7 {
  width: 57.08333%; }

.col-md-8 {
  width: 65.66667%; }

.col-md-9 {
  width: 74.25%; }

.col-md-10 {
  width: 82.83333%; }

.col-md-11 {
  width: 91.41667%; }

.col-md-12 {
  width: 100%; }

.col-xs-1 {
  width: 5.58333%; }

.col-xs-2 {
  width: 14.16667%; }

.col-xs-3 {
  width: 22.75%; }

.col-xs-4 {
  width: 31.33333%; }

.col-xs-5 {
  width: 39.91667%; }

.col-xs-6 {
  width: 48.5%; }

.col-xs-7 {
  width: 57.08333%; }

.col-xs-8 {
  width: 65.66667%; }

.col-xs-9 {
  width: 74.25%; }

.col-xs-10 {
  width: 82.83333%; }

.col-xs-11 {
  width: 91.41667%; }

.col-xs-12 {
  width: 100%; }
<div class="row">
            <div class="col-md-6">
                 col-6
            </div>
            <div class="col-md-6">
                col-6
            </div>
            <div class="col-md-6">
                col-6
            </div>
        </div>

0

1 ответ 1

1

Вы неверно поняли концепцию сетки Bootstrap. Вам ненужно самому переопределять стили col-xs, вам нужно div дополнить классами, которые бы отвечали за отображение на других разрешениях дисплея - .col-sm, .col-md, .col-lg. Именно эти классы и будут переопределять стандартные стили col-xs.

Суть работы сетки в том, чтобы в сумме все цифры в классах на блоках, которые должны быть на одной строке, равнялись 12.

То есть, 6+6=12, поэтому два блока на одной строке. А если вы хотите 4 блока разместить на одной строке, тогда замените на .col-lg-3 (3+3+3+3=12).

На практике это выглядит так:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
		<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">1</div>
		<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">2</div>
		<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">3</div>
		<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">4</div>
	</div>
</div>

Если же в целом вам Bootstrap нужен только для сетки и вы сами хотите контролировать разрешение, при котором вы хотите менять верстку и при этом не использовать кучу классов, я бы рекомендовал использовать подобную сетку (написана на Stylus):

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12
    position relative
    min-height 1px
    padding 0 15px
    @media (min-width 720px)
        display inline-block
        vertical-align top

@media (min-width 720px)
    .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12
        width 100%
    .col-5
        width 83.33333333%
    .col-4
        width 66.66666667%
    .col-3
        width 50%
    .col-2
        width 33.33333333%
    .col-1
        width 16.66666667%

@media (min-width 1024px)
    .col-12
        width 100%
    .col-11
        width 91.66666667%
    .col-10
        width 83.33333333%
    .col-9
        width 75%
    .col-8
        width 66.66666667%
    .col-7
        width 58.33333333%
    .col-6
        width 50%
    .col-5
        width 41.66666667%
    .col-4
        width 33.33333333%
    .col-3
        width 25%
    .col-2
        width 16.66666667%
    .col-1
        width 8.33333333%
5
  • но ели допустим в одном разрешении 33.3! % ширина блока, а в другом должно быть 25% то разве это дополнение?
    – ddeadlink
    15 мар 2017 в 12:36
  • @ddeadlink да. Дополнил ответ. 15 мар 2017 в 12:37
  • суть теперь более понятна, но как коррелировать ширину если разные разрешения. На ум приходит только куча медиа запросов
    – ddeadlink
    15 мар 2017 в 12:48
  • @ddeadlink так использование бутстрап и нужно вам для того, чтобы не писать кучу медиа запросов - за вас уже они написаны в библиотеки. Рекомендую вам открыть исходных код бутстрап и посмотреть самому, как в нем реализована сетка. 15 мар 2017 в 12:53
  • это и хотел уточнить) спасибо за ответы
    – ddeadlink
    15 мар 2017 в 13:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.