Bootstrap 3 ออฟเซ็ตทางขวาไม่ใช่ซ้าย

93

เกี่ยวกับ BS 3 ถ้าฉันต้องการเพียงแค่คอลัมน์แคบ ๆ ของเนื้อหาทางด้านขวาฉันอาจใช้คลาสออฟเซ็ตที่ 9 และคอลัมน์ 3

อย่างไรก็ตามถ้าฉันต้องการย้อนกลับและทางด้านซ้ายล่ะ? มีวิธีที่เหมาะสมในการทำ BS หรือฉันควรใช้วิธี CSS ของตัวเอง? ฉันกำลังคิดที่จะสร้างคอลัมน์ 3 ด้วยเนื้อหาของฉันและเป็นเพียงคอลัมน์ว่างเปล่าที่ 9

twitter-bootstrap-3 
— ทำงานร่วมกัน 2013
แหล่งที่มา

คำตอบ:

95

แถว 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% ไปทางขวา แต่เว้นช่องว่างไว้ทางขวา 1 คอลัมน์ (ในตัวอย่างตาราง 12 คอลัมน์):col-xs-6 pull-right col-xs-pull-1
— James Cushing
ทางด้านซ้ายเนื่องจากคุณแบ่งเนื้อหาออกเป็นแถวต่างๆด้วยตนเอง และหากคุณลบออกและเนื้อหาต่อไปนี้ไม่กว้าง 100% (เช่นตามคอลัมน์บางคอลัมน์ที่มีความกว้าง 50% col-xs-6) มันจะกองอย่างผิดปกติ
— kpull1
ฉันไม่รู้ว่าทำไมนี่เป็นคำตอบที่ได้รับการยอมรับด้วยคะแนนโหวตมากมายมันไม่ตอบคำถามทั้งหมดที่เกิดขึ้นที่นี่คือ col-xs-3 ถูกพันด้วยแถวซึ่งเป็นเหตุผลว่าทำไมจึงไม่มีเนื้อหาเพิ่มเติม บรรทัด / แถวเดียวกันนั้น ถ้ามี col-xs-3 อีกอันก็จะอยู่ถัดจาก col-xs-3 ที่ 1 ในแถวเดียวกันดังนั้นคำตอบนี้จึงไม่ตอบคำถาม คำตอบโดย 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 ทำสิ่งเดียวกันจากทางซ้ายเท่านั้น
— Scott
วิธีแก้ปัญหาที่ยอดเยี่ยม! สิ่งนี้ต้องอยู่ใน bootstrap ฉันไม่เคยเข้าใจว่าทำไมพวกเขาไม่เพิ่ม
— FarukT
15

ฉันแก้ไข Bootstrap SASS (v3.3.5) ตามคำตอบของ Rukshan

เพิ่มสิ่งนี้ในตอนท้ายของcalc-grid-columnmixin ใน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) {
  @ รวมโฟลตกริดคอลัมน์ ($ คลาส);
  @ รวม loop-grid-column ($ grid-column, $ class, width);
  @ รวม loop-grid-column ($ grid-column, $ class, pull);
  @ รวมลูป - กริดคอลัมน์ ($ grid-column, $ class, push);
  @ รวมลูป - กริดคอลัมน์ ($ grid-column, $ class, offset);
  @ รวม loop-grid-column ($ grid-column, $ class, offset-right);
}

จากนั้นคุณสามารถใช้คลาสเช่นcol-sm-offset-right-2และcol-md-offset-right-1

— WeNeigh
แหล่งที่มา
+1 สำหรับใช้percentageแทนการเข้ารหัสค่า นี่เป็นวิธีที่ใกล้เคียงกับวิธีที่ Bootstrap จัดการกับระบบกริดภายในนอกจากนี้ยังอนุญาตให้มีคอลัมน์กริดตัวแปรหากค่าเริ่มต้น 12 ไม่เป็นที่ต้องการ
— มูฮัมหมัดอับดุลราฮิม
2

เนื่องจาก Google ดูเหมือนจะชอบคำตอบนี้ ...

หากคุณต้องการให้ตรงกับหลักการตั้งชื่อของ Bootstrap 4 เช่น offset - * - # นี่คือการปรับเปลี่ยนดังกล่าว:

.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
แหล่งที่มา
1

จากคำตอบของ WeNeigh ! นี่คือตัวอย่าง LESS

.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 (เพื่อเก็บการกำหนดค่ากริดของคุณไว้) สำหรับกรณีพิเศษที่ใช้ไม่ได้กับโซลูชัน Ross Allen (เมื่อคุณไม่มีพาเรนต์ 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>
ขยายข้อมูลโค้ด

— Prakash
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.