Bootstrap 3 bù đắp bên phải không bên trái

92

Liên quan đến BS 3 nếu tôi chỉ muốn một cột nội dung hẹp ở bên phải, tôi có thể sử dụng lớp bù là 9 và cột 3.

Tuy nhiên, nếu tôi muốn ngược lại và ở bên trái thì sao? Có cách nào thích hợp để làm điều này trong BS hay tôi chỉ nên sử dụng các phương pháp CSS của riêng mình? Tôi đã nghĩ đến việc tạo một cột 3 với nội dung của mình và chỉ một cột 9 trống.

twitter-bootstrap-3 
— Work-Together2013
nguồn

Câu trả lời:

94

Các hàng Bootstrap luôn chứa các phao của chúng và tạo các dòng mới. Bạn không cần phải lo lắng về việc điền vào các cột trống, chỉ cần đảm bảo rằng chúng không thêm nhiều hơn 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>
Mở rộng đoạn mã

— Ross Allen
nguồn
2
Đối với một cột trống, hãy sử dụng col-X-pull-Ycác lớp của Bootstrap . Ví dụ: để đẩy thứ gì đó có kích thước 50% sang bên phải nhưng để lại một cột không gian ở bên phải (trong lưới 12 cột làm ví dụ):col-xs-6 pull-right col-xs-pull-1
— James Cushing
Nó ở bên trái vì bạn chia nội dung thành các hàng khác nhau theo cách thủ công. Và nếu bạn loại bỏ chúng và nội dung sau không rộng 100% (tức là theo sau một số cột có chiều rộng 50% col-xs-6) thì nó sẽ chồng chất một cách tồi tệ.
— kpull1
Tôi không biết tại sao đây là câu trả lời được chấp nhận với rất nhiều phiếu bầu, nó không trả lời câu hỏi, tất cả những gì đã xảy ra ở đây là col-xs-3 được bao bọc bởi một hàng, đó là lý do tại sao không có nội dung nào tiếp theo cùng dòng / hàng đó. nếu có một col-xs-3 khác thì nó sẽ nằm ngay bên cạnh col-xs-3 thứ nhất trên cùng một hàng, vì vậy câu trả lời này không trả lời câu hỏi. Câu trả lời của kpull1 đạt được kết quả yêu cầu.
— NZ Dev
82

Tôi đang sử dụng CSS tùy chỉnh đơn giản sau đây mà tôi đã viết để đạt được điều này.

.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;
  }
}
— Rukshan
nguồn
2
Mã hóa phần trăm cứng là rất không lý tưởng. Ngoài ra, có thể thay đổi cách hệ thống lưới của Bootstrap hoạt động, vì vậy bạn không được đảm bảo có 12 cột. Trong trường hợp đó, câu trả lời này không thành công. Tốt hơn hết bạn nên tính tỷ lệ phần trăm liên quan đến số lượng cột lưới.
— Muhammad Abdul-Rahim
6
bootstrap làm điều tương tự chỉ từ cánh trái
— Scott
một giải pháp tuyệt vời! điều này phải có trong bootstrap, tôi không bao giờ hiểu tại sao họ không thêm vào
— FarukT
15

Tôi đã sửa đổi Bootstrap SASS (v3.3.5) dựa trên câu trả lời của Rukshan

Thêm điều này vào cuối calc-grid-columnmixin mixins/_grid-framework.scss, ngay bên dưới $type == offsetđiều kiện if.

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

Sửa đổi make-gridmixin trong mixins/_grid-framework.scssđể tạo các offset-rightlớp.

// Tạo lưới cho lớp cụ thể
@mixin make-grid ($ class) {
  @include float-grid-column ($ class);
  @include loop-lưới-cột ($ lưới-cột, $ lớp, chiều rộng);
  @include loop-lưới-cột ($ lưới-cột, $ class, pull);
  @include loop-lưới-cột ($ lưới-cột, $ class, push);
  @include loop-grid-column ($ grid-column, $ class, offset);
  @include loop-lưới-cột ($ lưới-cột, $ class, offset-right);
}

Sau đó, bạn có thể sử dụng các lớp như col-sm-offset-right-2vàcol-md-offset-right-1

— WeNeigh
nguồn
+1 để sử dụng percentagethay vì mã hóa cứng các giá trị; điều này gần với cách Bootstrap xử lý nội bộ hệ thống lưới, cộng với nó cho phép một cột lưới biến đổi nếu 12 mặc định là không mong muốn.
— Muhammad Abdul-Rahim
1

Dựa trên câu trả lời của WeNeigh ! đây là một ví dụ ÍT

.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);
— user1809033
nguồn
1

Vì Google có vẻ thích câu trả lời này ...

Nếu bạn đang tìm cách phù hợp với quy ước đặt tên của Bootstrap 4, tức là offset - * - #, thì đây là sửa đổi:

.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;
  }
}
— Michael Stenberg
nguồn
1

Bạn cần kết hợp nhiều lớp ( col-*-offset-*cho lề trái và col-*-pull-*kéo sang phải)

<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>
Mở rộng đoạn mã

Vì vậy, bạn không cần phải tách nó theo cách thủ công thành các hàng khác nhau.

— kpull1
nguồn
0

Đây là giải pháp tương tự như Rukshan nhưng ở dạng sass (để giữ cấu hình lưới của bạn) cho trường hợp đặc biệt không hoạt động với giải pháp Ross Allen (khi bạn không thể có div.row mẹ)

@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
nguồn
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>
Mở rộng đoạn mã

— Prakash
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.