Зміщення Bootstrap 3 справа не зліва

93

Що стосується BS 3, якщо мені потрібна лише вузька колонка вмісту праворуч, я міг би використовувати клас зміщення 9 і стовпець 3.

Однак що, якби я хотів зворотний бік і з лівого боку? Чи є правильний спосіб зробити це в BS або я повинен просто використовувати власні методи CSS? Я думав створити стовпець 3 зі своїм вмістом і просто порожній стовпець 9.

twitter-bootstrap-3 
— Працюй-разом2013
джерело

Відповіді:

94

Рядки Bootstrap завжди містять свої плаваючі та створюють нові рядки. Вам не потрібно турбуватися про заповнення порожніх стовпців, просто переконайтеся, що вони не складають більше 12.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-xs-offset-9">
      I'm a right column of 3
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      I'm a left column of 3
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      And I'm some content below both columns
    </div>
  </div>
</div>
Розгорніть фрагмент

— Росс Аллен
джерело
2
Для порожнього стовпця використовуйте col-X-pull-Yкласи Bootstrap . Наприклад, щоб штовхнути щось у розмірі 50% праворуч, але залишити одну колонку пробілу праворуч (наприклад, у сітці з 12 стовпців):col-xs-6 pull-right col-xs-pull-1
— Джеймс Кушинг
Це ліворуч, оскільки ви розділяєте вміст на різні рядки вручну. І якщо ви їх видалите, а наведений нижче вміст не має 100% ширини (тобто йде за деякими стовпцями шириною 50% col-xs-6), він буде скупчуватися дико.
— kpull1
Я не знаю, чому це прийнята відповідь із такою кількістю голосів, це не відповідає на питання, все, що тут сталося, - це col-xs-3, загорнуте в рядок, саме тому жоден подальший вміст не потрапив на той самий рядок / рядок. якби був інший col-xs-3, то він був би поряд із 1-м col-xs-3 у тому ж рядку, тому ця відповідь не відповідає на питання. Відповідь kpull1 досягає запитуваного результату.
— NZ Dev
82

Для досягнення цього я використовую наступний простий власний CSS, який я написав.

.col-xs-offset-right-12 {
  margin-right: 100%;
}
.col-xs-offset-right-11 {
  margin-right: 91.66666667%;
}
.col-xs-offset-right-10 {
  margin-right: 83.33333333%;
}
.col-xs-offset-right-9 {
  margin-right: 75%;
}
.col-xs-offset-right-8 {
  margin-right: 66.66666667%;
}
.col-xs-offset-right-7 {
  margin-right: 58.33333333%;
}
.col-xs-offset-right-6 {
  margin-right: 50%;
}
.col-xs-offset-right-5 {
  margin-right: 41.66666667%;
}
.col-xs-offset-right-4 {
  margin-right: 33.33333333%;
}
.col-xs-offset-right-3 {
  margin-right: 25%;
}
.col-xs-offset-right-2 {
  margin-right: 16.66666667%;
}
.col-xs-offset-right-1 {
  margin-right: 8.33333333%;
}
.col-xs-offset-right-0 {
  margin-right: 0;
}
@media (min-width: 768px) {
  .col-sm-offset-right-12 {
    margin-right: 100%;
  }
  .col-sm-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-sm-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-sm-offset-right-9 {
    margin-right: 75%;
  }
  .col-sm-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-sm-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-sm-offset-right-6 {
    margin-right: 50%;
  }
  .col-sm-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-sm-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-sm-offset-right-3 {
    margin-right: 25%;
  }
  .col-sm-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-sm-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-sm-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .col-md-offset-right-12 {
    margin-right: 100%;
  }
  .col-md-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-md-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-md-offset-right-9 {
    margin-right: 75%;
  }
  .col-md-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-md-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-md-offset-right-6 {
    margin-right: 50%;
  }
  .col-md-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-md-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-md-offset-right-3 {
    margin-right: 25%;
  }
  .col-md-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-md-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-md-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .col-lg-offset-right-12 {
    margin-right: 100%;
  }
  .col-lg-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-lg-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-lg-offset-right-9 {
    margin-right: 75%;
  }
  .col-lg-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-lg-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-lg-offset-right-6 {
    margin-right: 50%;
  }
  .col-lg-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-lg-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-lg-offset-right-3 {
    margin-right: 25%;
  }
  .col-lg-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-lg-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-lg-offset-right-0 {
    margin-right: 0;
  }
}
— Рукшан
джерело
2
Жорстке кодування відсотків дуже не ідеально. Крім того, можна змінити принцип роботи сіткової системи Bootstrap, тому вам не гарантовано мати 12 стовпців. У цьому випадку ця відповідь не вдається. Вам краще обчислити відсоток відносно кількості колонок сітки.
— Мухаммед Абдул-Рахім
6
bootstrap робить те ж саме лише зліва
— Скотт
чудовий обхідний шлях! це повинно бути в bootstrap, я ніколи не розумів, чому цього не додали
— FarukT
15

Я змінив Bootstrap SASS (v3.3.5) на основі відповіді Рукшана

Додайте це в кінці calc-grid-columnміксину mixins/_grid-framework.scss, прямо під $type == offsetумовою if.

@if ($type == offset-right) {
      .col-#{$class}-offset-right-#{$index} {
          margin-right: percentage(($index / $grid-columns));
      }
  }

Змініть make-gridмікшин, mixins/_grid-framework.scssщоб створити offset-rightкласи.

// Створення сітки для певного класу
@mixin make-grid ($ class) {
  @include float-grid-columns ($ class);
  @include loop-grid-columns ($ grid-columns, $ class, width);
  @include loop-grid-columns ($ grid-columns, $ class, pull);
  @include loop-grid-columns ($ grid-columns, $ class, push);
  @include loop-grid-columns ($ grid-columns, $ class, offset);
  @include loop-grid-columns ($ grid-columns, $ class, offset-right);
}

Потім ви можете використовувати класи як col-sm-offset-right-2іcol-md-offset-right-1

— WeNeigh
джерело
+1 за використання percentageзамість жорсткого кодування значень; це ближче до того, як Bootstrap внутрішньо обробляє систему сіток, плюс це дозволяє змінювати стовпець сітки, якщо за замовчуванням 12 небажаний.
— Мухаммед Абдул-Рахім
2

Оскільки Google, схоже, любить цю відповідь ...

Якщо ви хочете відповідати умовам іменування Bootstrap 4, тобто зміщення - * - #, ось ця модифікація:

.offset-right-12 {
  margin-right: 100%;
}
.offset-right-11 {
  margin-right: 91.66666667%;
}
.offset-right-10 {
  margin-right: 83.33333333%;
}
.offset-right-9 {
  margin-right: 75%;
}
.offset-right-8 {
  margin-right: 66.66666667%;
}
.offset-right-7 {
  margin-right: 58.33333333%;
}
.offset-right-6 {
  margin-right: 50%;
}
.offset-right-5 {
  margin-right: 41.66666667%;
}
.offset-right-4 {
  margin-right: 33.33333333%;
}
.offset-right-3 {
  margin-right: 25%;
}
.offset-right-2 {
  margin-right: 16.66666667%;
}
.offset-right-1 {
  margin-right: 8.33333333%;
}
.offset-right-0 {
  margin-right: 0;
}
@media (min-width: 576px) {
  .offset-sm-right-12 {
    margin-right: 100%;
  }
  .offset-sm-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-sm-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-sm-right-9 {
    margin-right: 75%;
  }
  .offset-sm-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-sm-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-sm-right-6 {
    margin-right: 50%;
  }
  .offset-sm-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-sm-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-sm-right-3 {
    margin-right: 25%;
  }
  .offset-sm-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-sm-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-sm-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .offset-md-right-12 {
    margin-right: 100%;
  }
  .offset-md-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-md-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-md-right-9 {
    margin-right: 75%;
  }
  .offset-md-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-md-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-md-right-6 {
    margin-right: 50%;
  }
  .offset-md-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-md-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-md-right-3 {
    margin-right: 25%;
  }
  .offset-md-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-md-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-md-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .offset-lg-right-12 {
    margin-right: 100%;
  }
  .offset-lg-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-lg-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-lg-right-9 {
    margin-right: 75%;
  }
  .offset-lg-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-lg-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-lg-right-6 {
    margin-right: 50%;
  }
  .offset-lg-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-lg-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-lg-right-3 {
    margin-right: 25%;
  }
  .offset-lg-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-lg-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-lg-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .offset-xl-right-12 {
    margin-right: 100%;
  }
  .offset-xl-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-xl-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-xl-right-9 {
    margin-right: 75%;
  }
  .offset-xl-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-xl-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-xl-right-6 {
    margin-right: 50%;
  }
  .offset-xl-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-xl-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-xl-right-3 {
    margin-right: 25%;
  }
  .offset-xl-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-xl-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-xl-right-0 {
    margin-right: 0;
  }
}
— Майкл Стенберг
джерело
1

На основі відповіді WeNeigh ! ось МЕНШЕ приклад

.col-offset-right(@i, @type) when (@i >= 0) {
    .col-@{type}-offset-right-@{i} {
        margin-right: percentage((@i / @grid-columns));
    }
    .col-offset-right(@i - 1, @type);
};
.col-offset-right(@grid-columns, xs);
.col-offset-right(@grid-columns, sm);
.col-offset-right(@grid-columns, md);
.col-offset-right(@grid-columns, lg);
— користувач1809033
джерело
1

Вам потрібно об’єднати кілька класів ( col-*-offset-*для лівого поля та col-*-pull-*для витягування його вправо)

<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-3 col-xs-offset-9">
      I'm a right column
    </div>
    <div class="col-xs-3">
      We're
    </div>
    <div class="col-xs-3">
      four columns
    </div>
    <div class="col-xs-3">
      using the
    </div>
    <div class="col-xs-3">
      whole row
    </div>
    <div class="col-xs-3 col-xs-offset-9 col-xs-pull-9">
      I'm a left column
    </div>
    <div class="col-xs-3">
      We're
    </div>
    <div class="col-xs-3">
      four columns
    </div>
    <div class="col-xs-3">
      using the
    </div>
    <div class="col-xs-3">
      whole row
    </div>
  </div>
</div>
Розгорніть фрагмент

Тому вам не потрібно розділяти його вручну на різні рядки.

— kpull1
джерело
0

Ось таке саме рішення, ніж Rukshan, але в sass (щоб зберегти вашу конфігурацію сітки) для особливого випадку, який не працює з рішенням Росса Аллена (коли ви не можете мати батьківський div.row)

@mixin make-grid-offset-right($class) {
    @for $index from 0 through $grid-columns {
        .col-#{$class}-offset-right-#{$index} {
            margin-right: percentage(($index / $grid-columns));
        }
    }
}

@include make-grid-offset-right(xs);

@media (min-width: $screen-sm-min) {
  @include make-grid-offset-right(sm);
}

@media (min-width: $screen-md-min) {
  @include make-grid-offset-right(md);
}

@media (min-width: $screen-lg-min) {
  @include make-grid-offset-right(lg);
}
— tchiot.ludo
джерело
0 

<div class="row col-xs-12">            
            <nav class="col-xs-12 col-xs-offset-7" aria-label="Page navigation">
                <ul class="pagination mt-0">                   
                    <li class="page-item">                        
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" asp-for="search" class="form-control" placeholder="Search" aria-controls="order-listing" />

                                <div class="input-group-prepend bg-info">
                                    <input type="submit" value="Search" class="input-group-text bg-transparent">                                   
                                </div>
                            </div>
                        </div>
                    </li>
                   
                </ul>
            </nav>
        </div>
Розгорніть фрагмент

— Пракаш
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.