เอาการขยายจากคอลัมน์ใน Bootstrap 3

342

ปัญหา:

ลบ padding / margin ไปทางขวาและซ้ายของ col-md- * ใน Bootstrap 3

รหัส HTML:

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

ผลลัพธ์ที่ต้องการ:

ปัจจุบันรหัสนี้เพิ่มการเติม / ระยะขอบไปทางขวาและซ้ายของสองคอลัมน์ ฉันสงสัยว่ามันคืออะไรฉันหายไปเพื่อที่จะลบพื้นที่พิเศษด้านข้าง?

หมายเหตุ:

หากฉันลบ "col-md-4" จากนั้นทั้งสองคอลัมน์จะขยายเป็น 100% แต่ฉันต้องการให้พวกเขาอยู่ติดกัน

css  twitter-bootstrap  html 
— kexxcream
แหล่งที่มา
1
สำหรับ Bootstrap 4 ใช้pl-0 pr-0เช่น<div class="col-7 pl-0 pr-0">
— Muhammad Shahzad
แม้สั้นกว่าpx-0ซึ่งรวมทั้งซ้ายและขวา
— Théophile

คำตอบ:

454

โดยปกติคุณจะใช้.rowเพื่อล้อมสองคอลัมน์ไม่ใช่.col-md-12- นั่นคือคอลัมน์ที่รวมคอลัมน์อื่น Afterall .rowไม่มีระยะขอบพิเศษและช่องว่างภายในที่ a col-md-12จะนำมาและลดพื้นที่ที่คอลัมน์จะแนะนำด้วยระยะขอบซ้ายและขวาติดลบ

<div class="container">
    <div class="row">
        <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

        <div class="col-md-4 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Dimensions</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>

        <div class="col-md-8 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Results</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>
    </div>
</div>

ถ้าคุณจริงๆอยากจะลบ padding / อัตรากำไรขั้นต้นเพิ่มชั้นเรียนเพื่อกรองขอบ / paddings สำหรับแต่ละคอลัมน์เด็ก

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
— MackieeE
แหล่งที่มา
การเพิ่ม. โดยไม่มีการเติมเต็มในคลาสคอนเทนเนอร์จำเป็นหรือไม่ ฉันจะบอกว่าการเพิ่ม. nopadding ใน. col-md-8 div ด้วยโค้ด CSS ที่คุณให้ไว้นั้นเพียงพอแล้ว
— Charles Ingalls
59
ฉันมักจะสร้าง 3 ชั้นเรียนพิเศษใน CSS ที่กำหนดเองของฉันคือ.padding-0ที่ตั้งค่าการเสริมด้านซ้ายและขวา (เท่านั้น) ถึง 0; .padding-smที่ตั้งค่า padding เป็น 2px และ.padding-mdตั้งค่า padding เป็น 5px ช่องว่างภายในปกติคือ 15px (ยกเว้นกรณีที่กำหนดเอง) ดังนั้นคลาสพิเศษเหล่านี้จึงเพียงพอ
— MichaelJTaylor
โดยวิธี . rowย้ายมันเป็นบรรทัดใหม่
— ozanmuyes
6
การเติมเต็มตามปกติจะถูกกำหนดเป็นแบบแปรผันไม่มีกำหนด @ grid-gutter-width: 30px;
— Vladislav Lezhnev
6
มี bootstrap ใด ๆ ที่กำหนดไว้ล่วงหน้าเพื่อลบการขยายหรือการสร้างคลาสเป็นวิธีแก้ปัญหาเท่านั้น
— Gaurav Aggarwal
186

Bootstrap 4ได้เพิ่มระดับ.no-gutters

Bootstrap 3 : ฉันเพิ่มสไตล์นี้ลงใน Bootstrap ของฉันน้อยลง / SASS:

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

จากนั้นใน HTML คุณสามารถเขียน:

<div class="row row-no-padding">

หากคุณต้องการกำหนดเป้าหมายเฉพาะคอลัมน์ลูกคุณสามารถใช้ตัวเลือกลูก (ขอบคุณ John Wu)

.row-no-padding > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

คุณอาจต้องการลบการขยายสำหรับอุปกรณ์บางขนาดเท่านั้น (ตัวอย่าง SASS):

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

คุณสามารถลบส่วนที่มีความกว้างสูงสุดของเคียวรีสื่อบันทึกได้หากคุณต้องการให้รองรับอุปกรณ์ขนาดเล็กขึ้นไป

— martinedwards
แหล่งที่มา
10
นี่คือ CSS ธรรมดานอกเหนือจากการซ้อน (ซึ่งยังอยู่ใน SASS) ดังนั้นจึงควรใช้งานได้เหมือนกัน
— Martinedwards
4
ฉันแนะนำให้ใช้ตัวเลือกลูกโดยตรงเพื่อปรับปรุงประสิทธิภาพ ใช้& >[class*="col-"]แทน
— John Wu
3
@ JohnWu ที่ป้องกันไม่ให้แถวที่ซ้อนกันจากการสืบทอดสไตล์ซึ่งทำให้ฉันมีปัญหาเล็กน้อย ขอบคุณ!
— ทรอยคาร์ลสัน
2
คุณควรใช้จริง ๆ[class^="col-"], [class*=" col-"] {...}แทนดังนั้นคุณจะไม่กำหนดเป้าหมายคลาสที่ชื่อfoocol-เช่น สิ่งนี้จะกำหนดเป้าหมายองค์ประกอบที่มีชื่อคลาสนั้นในตอนเริ่มต้นหรือให้เป็นคลาสรองเช่นกันโดยไม่ต้องกำหนดเป้าหมายที่พบสตริงเป็นส่วนหนึ่งของชื่อคลาสอื่น
— Brett
1
สูบบุหรี่ศักดิ์สิทธิ์! ฉันเพิ่งใช้เวลาหลายชั่วโมงในการต่อสู้กับสิ่งที่ฉันคิดว่าเป็นข้อบกพร่องของวิวพอร์ต iOS เพราะบางครั้ง iPhone 6 ของฉันจะทำงานอัตโนมัติ (แต่ไม่สอดคล้องกัน) บนหน้าเว็บของฉัน หลังจากลบช่องว่างภายในฉันคิดว่า autozoom ทำงานได้อย่างเหมาะสม! ขอบคุณ!
— Ryan
45

การลดเพียงการขยายในคอลัมน์จะไม่ทำให้เคล็ดลับเกิดขึ้นเนื่องจากคุณจะขยายความกว้างของหน้าทำให้หน้าเว็บของคุณไม่เท่ากัน navbar คุณต้องลดระยะขอบติดลบให้เท่ากันในแถว สละตัวอย่างน้อยกว่า @martinedwards ':

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
— phoeb
แหล่งที่มา
นี่เป็นปัญหาเมื่อแถวของคุณไม่ได้อยู่ในคอนเทนเนอร์หรือคอลัมน์อื่น อัตรากำไรติดลบเพียงชดเชยการขยายจากองค์ประกอบเหล่านั้น
— Fred Stark
ฉันต้องการ!importantระยะขอบทั้งสองเพื่อทำงานนี้
— Philip Bijker
22

โดยเฉพาะสำหรับ SASS mixin:

@mixin no-padding($side) {
    @if $side == 'all' {
        .no-padding {
            padding: 0 !important;
        }
    } @else {
        .no-padding-#{$side} {
            padding-#{$side}: 0 !important;
        }
    }
}

@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");

จากนั้นใน HTML คุณสามารถใช้ 

.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides

แน่นอนว่าคุณสามารถรวม @ เฉพาะการประกาศที่คุณต้องการ

— Vitaliy Silin
แหล่งที่มา
ฉันกำลังพยายามใช้มิกซ์อินนี้ (ขอบคุณสำหรับสิ่งนั้น) ในสถานการณ์นี้และช่องว่างภายในไม่ทำงาน .banners-home { @include make-row(); .banner-comprar,.banner-pq{ @include no-padding("all"); @include make-xs-column(6); @include make-sm-column(6); @include make-md-column(6); @include make-lg-column(6); } .banner-simulador{ @include no-padding("all"); @include make-xs-column(12); @include make-sm-column(12); @include make-md-column(12); @include make-lg-column(12); } }
— jpcmf80
ฉันคิดว่ามีอะไรผิดปกติ ฉันต้องการสร้างมิกซ์อินอื่นสำหรับโซลูชันนี้ใช้งานได้ Btw ขอบคุณสำหรับ SASS mixin :)
— jpcmf80
ฉันเพิ่งสร้างสิ่งนี้@mixin nopadding{ padding:0!important; }ในของฉัน_mixin.scss จากนั้นเพิ่ม@include nopadding;รหัสข้างต้น :)
— jpcmf80
18

ต่อจากนี้มีให้เฉพาะที่ Bootstrap4

<div class="p-0 m-0">
</div>

หมายเหตุ: .p-0 และ. m-0 ได้เพิ่ม bootstrap.css แล้ว

— Ali GökselBektaş
แหล่งที่มา
15

เพียงเพิ่ม"no-padding"ซึ่งเป็นคลาส inbuilt ใน bootstrap 3

— บาร์กา
แหล่งที่มา
ได้ผลสำหรับฉันเมื่อเพิ่มลงในคอลัมน์ สิ่งนี้ควรใช้เมื่อใช้คอลัมน์ที่ซ้อนกันเพื่อหลีกเลี่ยงการซ้อนหลาย
— NicolasBernier
4
นอกจากนี้เราสามารถเพิ่มno-gutterคลาสให้กับผู้ปกครอง.rowได้
— ArtBIT
3
@ArtBIT ฉันคิดว่าคุณต้องรหัสno-guttersตามv4-alpha.getbootstrap.com/layout/grid/#no-gutters มันไม่ได้อยู่ในเครื่อง
— Caltor
10

อีกวิธีหนึ่งที่เป็นไปได้ก็ต่อเมื่อคุณรวบรวม bootstrap จากแหล่งที่มาน้อยของมันคือการกำหนดตัวแปรที่กำหนดช่องว่างภายในสำหรับคอลัมน์

คุณจะพบว่าตัวแปรที่variables.lessไฟล์: @grid-gutter-widthก็เรียกว่า

มันอธิบายแบบนี้ในแหล่งที่มา:

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

ตั้งค่านี้เป็น 0, รวบรวมและรวมถึงผลbootstrap.less bootstrap.cssคุณทำเสร็จแล้ว อาจเป็นอีกทางเลือกหนึ่งในการกำหนดกฎเพิ่มเติมหากคุณใช้แหล่ง bootstrap เช่นฉันอยู่แล้ว

— ลิงค์
แหล่งที่มา
6

Bootstrap 3 ตั้งแต่รุ่น3.4.0มีวิธีการอย่างเป็นทางการในการลบช่องว่างภายใน: คลาสrow-no-guttersชั้นเรียน

ตัวอย่างจากเอกสาร :

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
— Smi
แหล่งที่มา
3

การแก้ปัญหาข้างต้นไม่ได้ผลอย่างสมบูรณ์แบบสำหรับฉัน ทำตามคำตอบนี้ฉันสามารถสร้างบางสิ่งที่เหมาะกับฉัน ที่นี่ฉันยังใช้คิวรีสื่อเพื่อ จำกัด สิ่งนี้ให้กับหน้าจอขนาดเล็กเท่านั้น

@media (max-width: @screen-sm) {
    [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .container-fluid {
      margin: 0;
      padding: 0;
    }
}
— RLV แดน
แหล่งที่มา
3

ลบระยะห่างจากคอลัมน์ b / w โดยใช้ bootstrap 3.7.7 หรือน้อยกว่า

.no-gutter เป็นคลาสแบบกำหนดเองที่คุณสามารถเพิ่มลงใน DIV แถวของคุณ

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
— ซุปเปอร์โมเดล
แหล่งที่มา
สิ่งนี้ใช้ได้ผลและไม่ต้องการ LESS หรือ SASS ฉันไม่ได้แจ้งให้ทราบว่าผมมีการเพิ่มระดับคอนเทนเนอร์ไปยังแถวของฉัน margin:0 auto;แต่เช่นเดียวกับการใช้นี้ตกแต่งพิเศษตามสไตล์:
— Volomike
ผู้พัฒนาจะต้องตระหนักถึงสิ่งนี้เมื่อทำเสร็จแล้วพวกเขาจำเป็นต้องสร้าง DIV ภายในคอลัมน์และใช้ระยะขอบกับสิ่งนั้นเพื่อสร้างขนาดรางน้ำของตัวเอง
— Volomike
2 
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>

<div class="col-md-4">
    <div class="widget row">
        <div class="widget-header">
            <h3>Dimensions</h3>
        </div>

        <div class="widget-content" id="">
            <div id='jqxWidget'>
                <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                <div style="clear:both;" id="listBoxB"></div>

            </div>
        </div>
    </div>
</div>

<div class="col-md-8">
    <div class="widget row">
        <div class="widget-header">
            <h3>Results</h3>
        </div>

        <div class="widget-content">
            <div id="map_canvas" style="height: 362px;"></div>
        </div>
    </div>
</div>

คุณสามารถเพิ่มคลาสของแถวให้กับ div ภายใน col-md-4 และระยะขอบ -15px ของแถวจะสร้างสมดุลของรางน้ำออกจากคอลัมน์ คำอธิบายที่ดีที่นี่เกี่ยวกับรางและแถวใน Bootstrap 3

— 1Bladesforhire
แหล่งที่มา
2

ฉันเดาว่ามันใช้ง่ายกว่า 

margin:-30px;

เพื่อแทนที่ค่าดั้งเดิมที่กำหนดโดย bootstrap

ฉันพยายามแล้ว 

margin: 0px -30px 0px -30px;

และมันก็ได้ผลกับฉันด้วย

— แบชเชียร์
แหล่งที่มา
1

ล้อมรอบคอลัมน์ของคุณในรูปแบบ. row และเพิ่มคลาสนั้นในหมวด div ที่ชื่อว่า "no-gutter"

<div class="container">
  <div class="row no-gutter">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>
</div>

จากนั้นวางเนื้อหาด้านล่างลงในไฟล์ CSS ของคุณ

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}
— จิ
แหล่งที่มา
1

ลบ / ปรับแต่ง Bootstrap Gutter ด้วยการอ้างอิง css: http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

/* remove */
.gutter-0.row {
  margin-right: -0px;
  margin-left: -0px;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
  padding-right: 0px;
  padding-left: 0px;
}

/* customize */
.gutter-6.row {
  margin-right: -3px;
  margin-left: -3px;
}
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
  padding-right: 3px;
  padding-left: 3px;
}
    
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gutter-6">
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>
ขยายตัวอย่างข้อมูล

— haryx8
แหล่งที่มา
0

คุณสามารถสร้างคลาสใหม่สำหรับการลบมาร์จิ้นและสามารถใช้กับองค์ประกอบที่คุณต้องการลบมาร์จิ้นพิเศษ:

.margL0 { margin-left:0 !important }

! สำคัญ : มันจะช่วยคุณในการลบ margin เริ่มต้นหรือเขียนทับค่า margin ปัจจุบัน

และใช้กับ div นั้นซึ่งคุณต้องการลบระยะขอบจากด้านซ้าย

— Udit Bansal
แหล่งที่มา
0 
<style>
.col-md-12{
 padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>
— ซรีลักชมี
แหล่งที่มา
คุณช่วยอธิบายคำตอบของคุณได้ไหม
— PKirby
ระบุรหัสเหล่านี้ก่อนหรือหลังแท็ก <head> เพื่อให้สิ่งนี้จะแทนที่คุณสมบัติคลาสเหล่านั้นในหน้านั้น
— Sreelakshmi
0

คุณสามารถสร้าง Mixins น้อยลงโดยใช้ bootstrap เพื่อจัดการส่วนต่างและส่วนเสริมของคอลัมน์เช่น

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

การใช้งาน: 

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

ในทำนองเดียวกันสำหรับการตั้งค่าระยะขอบ / ระยะห่างระหว่างศูนย์ที่คุณสามารถใช้ได้

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
— โมฮันเดเร
แหล่งที่มา
ดูเหมือนว่าข้อมูลสาระสำคัญอยู่ในหน้าเชื่อมโยงแล้ว นี่ไม่ใช่ทางของดังนั้น ใส่ข้อมูลที่จำเป็นลงในคำตอบของคุณ!
— jogo
หรือผู้คนสามารถใช้คำตอบที่ได้รับการยอมรับกับ 159 upvotes และไม่มี downvotes นั่นอยู่ที่นี่มาสองปีแล้ว หรือหนึ่งในคำตอบอื่น ๆ ที่มีมากกว่าสิบ upvotes คุณจะต้องพยายามให้มากขึ้นเพื่อให้ได้ตำแหน่งในหน้านี้เทียบกับการแข่งขันนั้น
— Tom Zych
0

สร้างคำตอบของ Vitaliy Silinคำตอบไม่เพียง แต่ครอบคลุมกรณีที่เราไม่ต้องการใช้ช่องว่าง แต่ยังรวมถึงกรณีที่เรามีช่องว่างขนาดมาตรฐาน

ดูการแปลงสดของรหัสนี้เป็น CSS บน sassmeister.com 

@mixin padding($side, $size) {
    $padding-size : 0;
    @if $size == 'xs' { $padding-size : 5px; }
    @else if $size == 's' { $padding-size : 10px; }
    @else if $size == 'm' { $padding-size : 15px; }
    @else if $size == 'l' { $padding-size : 20px; }

    @if $side == 'all' {
        .padding--#{$size} {
            padding: $padding-size !important;
        }
    } @else {
        .padding-#{$side}--#{$size} {
            padding-#{$side}: $padding-size !important;
        }
    }
}

$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
@each $current-side in $sides-list {
  @each $current-size in $sizes-list {
    @include padding($current-side,$current-size);
  }
}

นี่จะเป็นผลลัพธ์:

.padding--none {
  padding: 0 !important;
}

.padding--xs {
  padding: 5px !important;
}

.padding--s {
  padding: 10px !important;
}

.padding--m {
  padding: 15px !important;
}

.padding--l {
  padding: 20px !important;
}

.padding-top--none {
  padding-top: 0 !important;
}

.padding-top--xs {
  padding-top: 5px !important;
}

.padding-top--s {
  padding-top: 10px !important;
}

.padding-top--m {
  padding-top: 15px !important;
}

.padding-top--l {
  padding-top: 20px !important;
}

.padding-right--none {
  padding-right: 0 !important;
}

.padding-right--xs {
  padding-right: 5px !important;
}

.padding-right--s {
  padding-right: 10px !important;
}

.padding-right--m {
  padding-right: 15px !important;
}

.padding-right--l {
  padding-right: 20px !important;
}

.padding-bottom--none {
  padding-bottom: 0 !important;
}

.padding-bottom--xs {
  padding-bottom: 5px !important;
}

.padding-bottom--s {
  padding-bottom: 10px !important;
}

.padding-bottom--m {
  padding-bottom: 15px !important;
}

.padding-bottom--l {
  padding-bottom: 20px !important;
}

.padding-left--none {
  padding-left: 0 !important;
}

.padding-left--xs {
  padding-left: 5px !important;
}

.padding-left--s {
  padding-left: 10px !important;
}

.padding-left--m {
  padding-left: 15px !important;
}

.padding-left--l {
  padding-left: 20px !important;
}
— Adrien Be
แหล่งที่มา
0

บางครั้งคุณอาจสูญเสียการขยายที่คุณต้องการสำหรับคอลัมน์ พวกเขาท้ายเกาะติดกัน เพื่อป้องกันไม่ให้คุณสามารถปรับปรุงชั้นเรียนดังต่อไปนี้:

<div class="col-md-3 NoPaddingForChildren">
        <div class="col-md-6">
                    <label>Id</label>
                    <input ng-model="ID" class="form-control">
        </div>
        <div class="col-md-6">
                    <label>Value</label>
                    <input ng-model="Val" class="form-control">
        </div>
</div>

และคลาสที่เกี่ยวข้อง:

.NoPaddingForChildren > div:not(:first-child):not(:last-child) {
    padding-left: 0;
    padding-right: 0;
}

.NoPaddingForChildren > div:first-child {
    padding-left: 0;
}

.NoPaddingForChildren > div:last-child {    
    padding-right: 0;
}
— Mahesh
แหล่งที่มา
0

หากคุณดาวน์โหลด bootstrap ด้วยไฟล์ SASS คุณจะสามารถแก้ไขไฟล์กำหนดค่าที่มีการตั้งค่าสำหรับระยะขอบของคอลัมน์แล้วบันทึกไว้ในวิธีนั้น SASS จะคำนวณความกว้างใหม่ของคอลัมน์

— TheCrazyProfessor
แหล่งที่มา
0

คุณสามารถปรับแต่งระบบ Bootstrap Grid ของคุณและกำหนดกริดการตอบสนองที่กำหนดเองของคุณ

เปลี่ยนค่าเริ่มต้นของคุณสำหรับความกว้างของรางน้ำต่อไปนี้ @grid-gutter-width = 30pxเป็น@grid-gutter-width = 0px

(ความกว้างของรางน้ำเป็นช่องว่างระหว่างคอลัมน์และแบ่งครึ่งครึ่งสำหรับด้านซ้ายและขวา)

— Rafiqul Islam
แหล่งที่มา
0

ฉันยังต้องการควบคุม padding ทุกขนาดหน้าจอดังนั้น css นี้อาจเป็นประโยชน์กับพวกคุณ :)

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}
— Eryk Wróbel
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.