202

ฉันแน่ใจว่ามีวิธีแก้ไขปัญหานี้อย่างง่าย โดยทั่วไปถ้าฉันมีสองคอลัมน์ฉันจะเพิ่มช่องว่างระหว่างพวกเขาได้อย่างไร

เช่นถ้า html คือ:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

เอาต์พุตจะเป็นสองคอลัมน์ถัดจากกันโดยใช้ความกว้างทั้งหมดของหน้า บอกว่าตั้งไวด์ ธ1000pxแล้วแต่ละ div จะเป็น500pxไวด์

ถ้าฉันต้องการที่100pxว่างระหว่างสองสิ่งฉันจะทำสิ่งนี้ได้อย่างไร เห็นได้ชัดโดยอัตโนมัติผ่าน bootstrap ขนาด div จะกลายเป็นขนาด450pxเพื่อชดเชยพื้นที่

— Muhammed Bhikha
แหล่งที่มา

149

คุณสามารถบรรลุระยะห่างระหว่างคอลัมน์โดยใช้การเรียนการบันทึกไว้ที่นี่col-md-offset-* ระยะห่างสอดคล้องกันเพื่อให้คอลัมน์ทั้งหมดของคุณอยู่ในแนวที่ถูกต้อง เพื่อให้ได้ระยะห่างและขนาดคอลัมน์ฉันจะทำสิ่งต่อไปนี้:

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

ใน Bootstrap 4 ให้ใช้: offset-2หรือoffset-md-2

— เบน
แหล่งที่มา

30

ที่จะทำงานเมื่อฉันต้องการติดกับขนาดคอลัมน์เริ่มต้นจะเกิดอะไรขึ้นถ้าฉันต้องการขนาดที่เฉพาะเจาะจงของระยะห่างแทนที่จะชดเชยคอลัมน์?

— Muhammed Bhikha

3

ในกรณีนี้ฉันขอแนะนำให้ใช้ mixins ที่จัดเตรียมไว้เพื่อปรับ gutters คอลัมน์: getbootstrap.com/css/#grid-less - Bootstrap ไม่ได้ทำตามที่คุณถามในคำถามมันไม่สามารถ "ปรับ" ความกว้างกริดสำหรับบัญชี ระยะห่างพิเศษในระหว่างเพราะมันขึ้นอยู่กับตารางพิกเซล

— Ben

2

George - คุณมีคลาส offset สำหรับสิ่งนี้ แต่ถ้าคุณพบว่ารางในตัวไม่เพียงพอคุณอาจต้องการลองรวบรวม bootstrap เวอร์ชั่นของคุณเองไม่ว่าจะจาก sass หรือน้อยกว่าขึ้นอยู่กับความชอบของคุณ จากนั้นคุณสามารถปรับเปลี่ยนความกว้างคอลัมน์และรางให้ตรงกับเว็บไซต์ของคุณ การเพิ่ม div ที่ว่างเปล่านั้นไม่ได้เลวร้ายอะไรนักสิ่งสำคัญคือสิ่งที่คุณ (และ / หรือทีมของคุณ) สามารถใช้งานได้อย่างสม่ำเสมอ ถ้า divs ที่ว่างเปล่าเป็นวิธีการที่คุณประสบความสำเร็จ โปรดจำไว้ว่านักพัฒนาของคุณมีวัตถุประสงค์เพื่อให้นักพัฒนาอ่านไม่ใช่ผู้ใช้ปลายทาง

— Ben

24

โพสต์นี้ไม่ได้คำตอบเลยมันสร้างช่องว่างที่ใหญ่กว่าถาม

— Sebastien

2

ใน Bootstrap 4 นี่คือ offset-md-2 หรือ offset-2

— Mahesh

318

ฉันกำลังเผชิญกับปัญหาเดียวกัน; และต่อไปนี้ทำงานได้ดีสำหรับฉัน หวังว่านี่จะช่วยให้บางคนลงจอดที่นี่:

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

วิธีนี้จะทำให้มีช่องว่างระหว่าง 2 div โดยอัตโนมัติ

ป้อนคำอธิบายรูปภาพที่นี่

— Utpal - Ur Best Pal
แหล่งที่มา

สาเหตุหลักมาจากความกว้างของรางน้ำ

— Utpal - Ur Best Pal

15

"ความกว้างของรางน้ำ" หมายถึงระยะห่างระหว่างช่องว่างภายในและระยะขอบที่กำหนดไว้ในแกนกลางของระบบกริดของ bootstrap ในระยะสั้นการเพิ่ม div ที่สองด้วยcol-xs-12จะเหมือนกับการเพิ่ม div ด้วยwidth:100%; padding:0px 15x;

— mix3d

@ sixty4bit คุณสามารถแบ่งปันรหัสของคุณได้ อาจจะเป็นฉันสามารถช่วยคุณ

— Utpal - Ur Best Pal

นั่นคงจะยอดเยี่ยม @ Utpal-UrBestPal ขอบคุณ! นี่คือส่วนสำคัญ: gist.github.com/davidcpell/8d344ff18d5d188115c0ff9ba6ef7d14

— sixty4bit

2

หากคุณกำลังใช้การแก้ไขนี้ แต่ใช้งานไม่ได้อ่านสาเหตุที่แก้ไขในคำอธิบายของ @ mix3d และคุณจะเข้าใจสิ่งที่คุณทำผิด

— MauF

73

ฉันรู้ว่าฉันมางานปาร์ตี้ช้า แต่คุณสามารถลองเว้นวรรคด้วยช่องว่างภายใน

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS:

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

ไปกันเถอะ

— Robin Jonsson
แหล่งที่มา

ไม่ใช่เพราะคุณไม่สามารถใช้row-eq-heightกับมันได้

— Greg Woz

13

คุณสามารถใช้ background-clip และ box-model กับ border border

.box{
  box-model: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}

<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
</div>

— Ali El Habchi
แหล่งที่มา

13

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

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

นี่คือผลลัพธ์สุดท้ายที่เราจะทำ

การมีช่องว่างด้วยเงาที่หล่นระหว่างคอลัมน์เป็นปัญหา เราไม่ต้องการช่องว่างเพิ่มเติมระหว่างคอลัมน์ เราเพียงต้องการให้รางน้ำ "โปร่งใส" ดังนั้นสีพื้นหลังของไซต์จะปรากฏระหว่างคอลัมน์สีขาวสองคอลัมน์

นี่คือมาร์กอัพสำหรับสองคอลัมน์

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

วิธีการนี้ต้องการ div ภายในที่มีระยะขอบติดลบเช่นเดียวกับ bootstrap คลาส "row" ที่ใช้ และ div นี้เราเรียกมันว่า "ฟื้นคืนชีพ" จะต้องเป็นพี่น้องโดยตรงของคอลัมน์

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

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

— Joe Fitzgibbons
แหล่งที่มา

11

วิธีนี้จะช่วยให้มีช่องว่างระหว่างสองคอลัมน์และแน่นอนถ้าคุณต้องการเปลี่ยนความกว้างเริ่มต้นคุณสามารถไปหา mixins เพื่อปรับเปลี่ยนความกว้าง bootstrap เริ่มต้น หรือคุณสามารถกำหนดความกว้างโดยใช้สไตล์ CSS แบบอินไลน์

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>

— Amit
แหล่งที่มา

4

ความหมายของสิ่งนี้ไม่ตรงกับที่ @Muhammed ถาม คุณกำลังเพิ่มการเปลี่ยนแปลงในลำดับของคอลัมน์ด้วยการดึงซ้าย, ดึง - ขวา

— Luchux

9

คุณสามารถเว้นวรรคระหว่างคอลัมน์ได้โดยใช้คลาส col-xs- * ภายในโค้ด col-xs- * div ด้านล่าง ระยะห่างสอดคล้องกันเพื่อให้คอลัมน์ทั้งหมดของคุณอยู่ในแนวที่ถูกต้อง เพื่อให้ได้ระยะห่างและขนาดคอลัมน์ฉันจะทำสิ่งต่อไปนี้:

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>

— User_3535
แหล่งที่มา

6

ใช้.form-groupคลาสของ bootstrap เช่นนี้ในกรณีของคุณ:

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>

— S ..
แหล่งที่มา

1

ขอบล่างจะมีประโยชน์อย่างไรที่นี่

— Elisabeth

13

ฉันเข้าสู่ระบบโดยมีจุดประสงค์เพื่อไม่ชอบแฮ็คนี้

— szdrnja

14

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

— Adam Spires

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

— Black

5

ตามเอกสาร Bootstrap 4 คุณควรให้ระยะขอบติดลบแก่ผู้ปกครองmx-n*และเด็ก ๆ จะมีช่องว่างภายในเป็นบวกpx-*

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

— estani
แหล่งที่มา

สิ่งที่ทำงานที่ดีที่สุดสำหรับผม (ระยะห่างระหว่างแถวแนวตั้ง) เป็นและ<div class="row mt-n4"> <div class="col-3 pt-4">

— Gavin

4

ภายใน col-md- ให้สร้าง div อื่นและใส่รูปภาพใน div นั้นมากกว่าที่คุณจะสามารถเพิ่ม padding ได้

<div class="row">
  <div class="col-md-8">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>
  <div class="col-md-4">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>   
</div>

<style>
  thumbnail{
     padding:4px;
           }
</style>

— Farac
แหล่งที่มา

4

Bootstrap 4 , ไฟล์ custom.scss คุณสามารถเพิ่มรหัสต่อไปนี้:

$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base, 
sm: $grid-gutter-width-base, 
md: $grid-gutter-width-base, 
lg: $grid-gutter-width-base, 
xl: $grid-gutter-width-base
);

โดยค่าเริ่มต้น $ grid-gutter-width-base: 30px;

— Ivan Djordevic
แหล่งที่มา

1

คุณช่วยอธิบายได้ไหม มันไม่ทำงานสำหรับฉัน

— Selva Ganapathi

2

@SelvaGanapathi คุณต้องคอมไพล์ใหม่หลังจากเปลี่ยนตัวแปรเหล่านี้: getbootstrap.com/docs/4.0/layout/grid/#customizing-the-grid

— gbjbaanb

ใน Bootstrap 4 นี่คือ offset-md-2 หรือ offset-2

— Mahesh

2

ฉันต้องหาวิธีการทำสิ่งนี้กับ 3 คอลัมน์ ฉันต้องการปัดเศษมุมของกองและไม่สามารถเว้นระยะการทำงานได้ ฉันใช้มาร์จิ้น ในกรณีของฉันฉันคิดว่า 90% ของหน้าจอจะถูกกรอกด้วย divs และ 10% สำหรับระยะขอบ:

HTML:

<div class="row">
  <div id="orange" class="col-md-4">
    <h1>Orange Div</h1>
  </div>
  <div id="green" class="col-md-4">
    <h1>Green Div</h1>
  </div>
  <div id="aqua" class="col-md-4">
    <h1>Aqua Div</h1>
  </div>
</div>

และ CSS:

#orange {
    background-color:orange;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width:30%;
}
#green {
    background-color:green;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 0 0 0;
    width:30%;
}
#aqua {
    background-color:#39F;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width: 30%;
}

เพื่อให้ปรับขนาดได้อย่างถูกต้องสำหรับอุปกรณ์มือถือฉันได้เปลี่ยน CSS ความกว้างจาก 30% เป็นwidth:92.5%;ต่ำกว่า@media (max-width:1023px)

— เลเซอร์วันจิม
แหล่งที่มา

2

เนื่องจากคุณใช้bootstrapฉันคิดว่าคุณต้องการให้สิ่งที่ตอบสนองที่ตอบสนองต่อในกรณีนี้คุณไม่ควรใช้ขนาดคงที่เช่น 'px'

เพื่อแก้ไขปัญหาอื่น ๆ ฉันเสนอให้ทั้งคอลัมน์ "col-md-5" แทน "col-md-6" และจากนั้นในองค์ประกอบหลัก "แถว" ที่มีคอลัมน์เพิ่มระดับ "justify-content - ระหว่าง "ซึ่งวางที่ว่างตรงกลางในขณะที่คุณสามารถตรวจสอบใน bootstrap doc ที่นี่

วิธีนี้ใช้ได้กับคอลัมน์มากกว่าสองคอลัมน์ที่ปรับหลักสูตร "col-md-x"

หวังว่ามันจะช่วย;)

— ฮิวโก้
แหล่งที่มา

1

มันง่าย .. คุณต้องเพิ่มเส้นขอบทึบด้านซ้ายจากซ้ายไปยัง col- * และมันควรจะทำงาน .. :)

ดูเหมือนว่า: http://i.stack.imgur.com/CF5ZV.png

HTML:

<div class="row">
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
</div>

CSS:

div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}

— Mohamed Ahmed
แหล่งที่มา

8

คุณไม่ได้ใช้รหัสหลาย ๆ ตัวในหน้าเดียวกันมันขาดความรู้ในการใช้ CSS ใช้คลาสแทน

— LowFieldTheory

1

ฉันรู้ว่าโพสต์นี้เก่าไปหน่อย แต่ฉันพบปัญหาเดียวกันนี้ ตัวอย่างของ html ของฉัน

<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="FirstName" class="control-label"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="LastName" class="control-label"></label>
            <input asp-for="LastName" class="form-control" />
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div>
    </div>            
</div>

เพื่อที่จะสร้างช่องว่างระหว่างกลุ่มที่ฉันเขียนทับขอบของ bootstrap -15px ในไฟล์ site.css ของฉันโดยลดระยะขอบติดลบ 5

นี่คือสิ่งที่ฉันทำ ...

.form-group {
    margin-right: -10px;
}

ฉันหวังว่านี่จะช่วยคนอื่นได้

— มาร์ค Libner
แหล่งที่มา

1

ฉันต้องการหนึ่งคอลัมน์บนมือถือและสองคอลัมน์จากแนวตั้งแท็บเล็ตโดยมีระยะห่างเท่ากันระหว่างกลาง สามารถทำได้โดยใช้ยูทิลิตี้การเว้นวรรคและไม่ใส่ตัวเลขในcol-md:

    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
            <div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
        </div>
    </div>

— drvictor666
แหล่งที่มา

0

ลองเพิ่มเส้นขอบที่มีสีเดียวกับพื้นหลังโดยใช้ css ไหม ฉันใหม่สำหรับสิ่งนี้ดังนั้นอาจมีเหตุผลที่ดีที่ไม่ควรทำ แต่มันดูดีเมื่อฉันลองทำ

— ไบรอัน
แหล่งที่มา

5

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

— β.εηοιτ.βε

หากพื้นหลังใช้รูปภาพ / พื้นผิวแทนสีทึบจะเห็นได้ชัด

— Charles Watson

0

เพื่อให้ได้ความกว้างโดยเฉพาะของระยะห่างระหว่างคอลัมน์เราต้องตั้งค่าpaddingในเค้าโครงของ Bootstrap มาตรฐาน

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) { 
  .space-100-px > .row > .col-md-6:first-child {
    padding: 0 50px 0 0; /* The first half of 100px */
  }
  .space-100-px > .row > .col-md-6:last-child {
    padding: 0 0 0 50px; /* The second half of 100px */
  }
}

/* The result will be easier to see. */ 
.space-100-px img {
  width: 100%;
  height: auto;
}

<div class="container-fluid space-100-px">
  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Left" alt="Left">
    </div>
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Right" alt="Right">
    </div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

— Gleb Kemarsky
แหล่งที่มา

0

มันจะมีประโยชน์ ..

.list-item{
  margin-right:-10px;
   margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 0px;
  }

<div class="col-md-4">
  <div class="list-item">
      <h2>Your name</h2> 
  </div>
</div>
<div class="col-md-4">
   <div class="list-item"></div>
</div>

ขยายตัวอย่างข้อมูล

หากการใช้งานต้องการเพิ่มหรือลดระยะขอบเพิ่มเติมที่ด้านขวาของกล่องให้แก้ไขคุณสมบัติขอบด้านขวาของ list-item

ตัวอย่างผลลัพธ์

— arulraj
แหล่งที่มา

0

เส้นขอบสีขาวล้อมรอบองค์ประกอบห่อ

.padding-pls{
  border-left: 13px solid white;
  border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
  border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
  border-right: 0px solid white;
}

และเด็กคนแรกและสุดท้ายไม่มีเส้นขอบ

    <div class="row">
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
  </div>

— Jakub Stejskal
แหล่งที่มา

0

    <div class="col-md-12 no_padding header_row"></div>



    <div class="second_row">
        <div class="col-md-4 box_shadow"></div>
        <div class="col-md-8 no_padding_right">
            <div class="col-md-12 box_shadow"></div>
        </div>
    </div>


    body{
    background:#F0F0F0;
}

.main_holder{
    min-height: 600px;
    margin-top: 40px;
    height: 600px;
}
.box_shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    background: white;
    height: auto;
    min-height: 500px;
}

.no_padding{
    padding: 0px !important;
}

.no_padding_right{
    padding-right: 0px !important;
}

.header_row{
    height: 60px;
    background: #00796B;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); 
}

.second_row{
    position: relative;
    width: 100% !important;
    top: 20px;
}

— RITHIN K
แหล่งที่มา

2

เป็นร้อยแก้วเล็ก ๆ น้อย ๆ เกี่ยวกับสิ่งที่และเหตุผลที่อาจเป็นประโยชน์

— Uwe Allner

0

<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

โดยค่าเริ่มต้นนี้จะมีช่องว่างภายใน div ภายนอกตามที่คุณต้องการ นอกจากนี้คุณยังสามารถปรับเปลี่ยนช่องว่างภายในโดยใช้ CSS ที่กำหนดเอง

— Akshay R
แหล่งที่มา

0

วิธีง่ายๆ

.row div{
  padding-left: 8px;
  padding-right: 8px;
}

— Vladislav Koshenevskiy
แหล่งที่มา

0

Bootstrap 4

เอกสารบอกว่า ( ที่นี่ ):

แถวเป็นตัวเสริมสำหรับคอลัมน์ แต่ละคอลัมน์มีช่องว่างภายในแนวนอน (เรียกว่ารางน้ำ) เพื่อควบคุมช่องว่างระหว่างคอลัมน์เหล่านั้น การขยายตัวนี้จะถูกต่อต้านบนแถวที่มีระยะขอบติดลบ ด้วยวิธีนี้เนื้อหาทั้งหมดในคอลัมน์ของคุณจะถูกจัดวางให้อยู่ทางด้านซ้ายของภาพ

ดังนั้นคำตอบที่ถูกต้องคือ: ตั้งค่าcolการเสริมด้านซ้าย / ขวาเท่ากับลบด้วยrowขอบซ้าย / ขวาของคุณ ง่าย ๆ

#my-row {
  margin-left: -80px;
  margin-right: -80px;
}

#my-col {
  padding-left: 80px;
  padding-right: 80px;
}

การสาธิต: https://codepen.io/frouo/pen/OqGaWN

— frouo
แหล่งที่มา

0

Bootstrap 4 - คั่นคอลัมน์โดยใช้แถวที่ซ้อนกัน

<div class="container">
    <div class="row bg-info p-3">

        <!-- left column -->
        <div class="col-8 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>

        <!-- right column -->
        <div class="col-4 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>
    </div>
</div>

อาจใช้คำตอบที่ @estani เป็นวิธี "คลาสสิค" มากกว่านี้ในการทำเช่นนี้กับ bootstrap4?

— sodimel

0

สร้างคลาสและใช้:

กำไรขั้นต้น: 1.5em .5em; ความกว้างสูงสุด: Calc (50% - 1em) สำคัญ!

เมื่อ 1em บนความกว้างสูงสุดเท่ากับระยะขอบซ้าย / ขวารวมเข้าด้วยกัน

— WebDude0482
แหล่งที่มา

-1

นี่เป็นวิธีหนึ่งในการทำมันและผลงานของมัน โปรดตรวจสอบ URL ต่อไปนี้https://jsfiddle.net/sarfarazk/ofgqm0sh/

<div class="container">
 <div class="row">
  <div class="col-md-6">
    <div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    </div>
  </div>
</div>
</div>

— Sarfaraz Kasmani
แหล่งที่มา

-2

การใช้ระยะขอบซ้ายเป็นวิธีที่จะทำ:

<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>

ทำงานได้อย่างสมบูรณ์แบบ

— alanh
แหล่งที่มา

ไม่มันไม่ได้หยุดการตอบสนอง

— Crasher

-2

ด้วยเวอร์ชั่นบู๊ตสแตรปล่าสุดคุณสามารถใช้ "การ์ด"

— VFB
แหล่งที่มา

คำตอบของคุณต้องการคำอธิบายเพิ่มเติม โปรดดูstackoverflow.com/help/how-to-answer

— Simon.SA

ฉันจะเพิ่มระยะห่างระหว่างคอลัมน์ใน Bootstrap ได้อย่างไร

Bootstrap 4