Bootstrap grid, получите меньше чем col -xx-1 - PullRequest
Новая
       22

Bootstrap grid, получите меньше чем col -xx-1

0 голосов
/ 12 мая 2018

Использование Bootstrap и строка, состоящая из 4 <div>. Мне нужно столбец, который больше их col-xx-1 и меньше, чем col-xx-2. Как я могу установить половину столбца col-xx-2 и передать остальное пространство следующему div? 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-3">
        first text here
      </div>
      <div class="col-sm-2">
        THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
      </div>
      <div class="col-sm-5">
        third text here
      </div>
      <div class="col-sm-1">
        forth text here
      </div>
      <div class="col-sm-1">
        forth text here
      </div>
    </div>
  </div>
</div>

Ответы [ 3 ]

0 голосов
/ 12 мая 2018

Вы можете определить свои собственные классы поверх начальной загрузки

Bootstrap использует сетку из 12 столбцов. Ваше общее количество столбцов должно равняться 12. Изначально у вас было 3 + 2 + 5 + 1 + 1 = 12. Теперь его 3 + 1,5 + 5,5 + 1 + 1 = 12

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

[class*=col]{
  box-sizing: border-box;
  border: 1px solid black;
}

.col-xs-15,
.col-xs-55 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
/*e.g. change this min-width depending on if you are using col-md, col-lg, etc*/
/*e.g. col-sm set min-width to 768px;*/
@media (min-width: 1px){ 
  .col-xs-15,
  .col-xs-55{
    float: left;
  }
  .col-xs-15 {
    width: 12.5%;
  }
  .col-xs-55 {
    width: 45.8333333333%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjxsfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- your original file, I fixed errors you had here (you forgot to specify one row)-->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-3">
          first text here
        </div>
        <div class="col-xs-2">
          THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
        </div>
        <div class="col-xs-5">
          third text here
        </div>
        <div class="col-xs-1">
          forth text here
        </div>
        <div class="col-xs-1">
          forth text here
        </div>
      </div>
    </div>
  </div>
</div>

<br>
<br>

<!-- With changes -->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-3">
          first text here
        </div>
        <div class="col-xs-15">
          THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
        </div>
        <div class="col-xs-55">
          third text here
        </div>
        <div class="col-xs-1">
          forth text here
        </div>
        <div class="col-xs-1">
          forth text here
        </div>
      </div>
    </div>
  </div>
</div>

Я предлагаю взглянуть на исходный код начальной загрузки для реализации ваших собственных классов. https://github.com/twbs/bootstrap/blob/v3.4.0-dev/dist/css/bootstrap.css

0 голосов
/ 12 мая 2018

Просто, предоставив дополнительный пользовательский класс и добавив его в медиа-запрос 

.custom-width{
  width:15% !important;
}

Настройте ширину таким образом, чтобы она не переполняла ваши row

.col-sm-2,
.col-sm-3,
.col-sm-5,
.col-sm-1 {
  border: 1px solid;
}

@media only screen and (min-width: 768px) {
  /* Styles */
  .custom-width {
    width: 15% !important;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-3">
        first text here
      </div>
      <div class="col-sm-2 custom-width">
        THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
      </div>
      <div class="col-sm-5">
        third text here
      </div>
      <div class="col-sm-1">
        forth text here
      </div>
      <div class="col-sm-1">
        forth text here
      </div>
    </div>
  </div>
</div>
0 голосов
/ 12 мая 2018

Я думаю, вам нужно создать подколонки.

Так 

 <div class="col-sm-12"> 
  <div class="col-sm-3">
    first text here
  </div>
  <div class="col-sm-7"> // Extend the length to combine the two rows
    <div class="col-sm-4"> // Gives 1/3 of the 8 length column
       THIS ONE IS "COL-SM-1.5ish"
    </div>
    <div class="col-sm-8"> // Gives 2/3 of the 8 length column.
    </div>
  </div>
  ...

Я скомбинировал 2 столбца, чтобы сделать его col-sm-7, затем создал внутри него столбцы, которые дали вам больше места для работы внутри основного столбца. Вы можете настроить соответственно оттуда.

Извините, я не могу дать вам 100% правильный ответ, я обычно просто просматриваю ответы, надеюсь, это поможет или направит вас в правильном направлении.

...