열 사이의 간격을 어떻게 추가합니까?
두 개의 열이 있습니다.
<div class="col-md-6"></div>
<div class="col-md-6"></div>
어떻게 하면 그들 사이에 공간을 추가할 수 있습니까?
출력은 페이지의 전체 너비를 차지하는 두 개의 열이 서로 바로 옆에 있을 뿐입니다.너비가 다음으로 설정되었다고 가정합니다.1000px 각 는 그면각디브는러▁be디는브▁then각이 될 것입니다.500px넓은
내가 원한다면,100px할 수 : 부스트랩이달수성할있것습까니을로트으동자어떻로?divs 사이즈가 될 것입니다.450px간격을 보상하기 위해 각각.
저는 같은 문제에 직면해 있었고, 다음과 같은 것들이 저에게 잘 먹혔습니다.
<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>
그러면 자동으로 두 디브 사이에 공간이 약간 렌더링됩니다.
여기에 설명된 클래스를 사용하여 열 사이의 간격을 설정할 수 있습니다.모든 열이 올바르게 정렬되도록 간격이 일정합니다.간격과 열 크기를 고르게 하려면 다음을 수행합니다.
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
부트스트랩 4에서 다음을 사용합니다.offset-2또는offset-md-2
제가 파티에 늦은 건 알지만, 상자들 사이에 패딩을 넣어보세요.
<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;
}
한 번 해보세요.
테두리 속성과 함께 배경 그림 및 상자 모형을 사용할 수 있습니다.
.box{
box-sizing: 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>
저는 기둥 사이의 간격과 관련하여 비슷한 문제가 있었습니다.근본적인 문제는 부트스트랩 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는 기둥의 직계 형제여야 합니다.
이 방법을 사용하면 열 내부에 적절한 패딩이 생깁니다.공간을 생성하여 작동하는 것처럼 보이는 솔루션을 본 적이 있지만, 안타깝게도 이 솔루션이 생성하는 열은 행 양쪽에 추가 패딩이 있으므로 그리드 레이아웃에 맞게 설계된 행을 더 얇게 만듭니다.원하는 모양을 위해 이미지를 보면 두 개의 열이 함께 있는 것이 그리드의 자연 구조를 깨는 맨 위에 있는 하나의 열보다 작다는 것을 의미합니다.
이 접근 방식의 주요 단점은 각 열의 내용을 포장하는 추가 마크업이 필요하다는 것입니다.원하는 모양을 얻기 위해서는 특정 열 사이에 공간이 필요하기 때문에 이 방법이 효과적입니다.
부트스트랩 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>이렇게 하면 두 열 사이에 공백이 생길 수 있으며 기본 너비를 변경하려는 경우 기본 부트스트랩 너비를 수정하기 위해 mixin을 사용할 수 있습니다.또는 인라인 CSS 스타일을 사용하여 너비를 지정할 수 있습니다.
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
아래 코드화된 col-xs-* div에서 col-xs-* 클래스를 사용하여 열 사이의 간격을 설정할 수 있습니다.모든 열이 올바르게 정렬되도록 간격이 일정합니다.간격과 열 크기를 고르게 하려면 다음을 수행합니다.
<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>
당신은 부트스트랩을 사용하고 있기 때문에 반응성이 있는 제품을 만들고 싶은 것 같습니다.이 경우 'px'와 같이 고정 크기를 사용하면 안 됩니다.
다른 솔루션에 대한 해결 방법으로 두 열을 "col-md-6" 대신 "col-md-5"로 만든 다음 열을 포함하는 부모 요소 "row"에 "justify-content-between" 클래스를 추가하여 부트스트랩 문서에서 확인할 수 있습니다.
물론 이 솔루션은 "col-md-x"를 조정하는 두 개 이상의 열에도 유효합니다.
도움이 되길 바랍니다 ;)
부트스트랩 5는 갭을 더 쉽게 추가할 수 있는 방법을 제공합니다.
- 용사를
g-*콜/행 간격을 동일하게 만드는 클래스 gx-* gy-*간격을 만드는 입니다.
<div class="row g-2">
<div class="col-6">...</div>
<div class="col-6">...</div>
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
문서: https://getbootstrap.com/docs/5.0/layout/gutters/
col-md-? 안에 다른 div를 만들고 그 div에 그림을 넣으면 그렇게 쉽게 패딩을 추가할 수 있습니다.
<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>
부트스트랩 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-grid-width-base: 30ppm;
부트스트랩을 사용하고 있으므로 열 간격 속성은 구현하는 데 유용합니다. W3 Schools Column-Gap for Bootstrap에는 이 기능을 사용하는 방법에 대한 설명서가 있습니다.
- CSS:
.col-gap {
column-gap: 2rem;
}
그리고 HTML의 경우 div 행에 클래스(콜갭)가 있습니다.그러나 이것은 각 열의 크기를 줄이기 위해 col-md-6(또는 다른 크기)의 간격을 없앨 수도 있습니다. (예: col-md-6 -> col-md-5, 2개의 열만 있더라도)
- HTML:
//Row
<div class="row col-gap justify-content-center">
//Col 1
<div class="col-md-5 ms-3 card p-5">
<p>Div 1</p>
</div>
//Col 2
<div class="col-md-5 ms-3 card p-5">
<p>Div 2</p>
</div>
</div>
부트스트랩 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>
저는 3개의 칼럼에 대해 이것을 어떻게 하는지 알아내야 했습니다.저는 디브의 모서리를 둥글게 만들고 싶었지만, 작동할 간격을 잡을 수 없었습니다.여백을 사용했습니다.저의 경우 화면의 90%가 div에 의해 채워지고 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%에서 30%로 변경하도록 했습니다.width:92.5%;@media (max-width:1023px)
간단해요..오른쪽, 왼쪽에서 col-*에 솔리드 테두리를 추가해야 합니다. 그러면 작업이어야 합니다. :)
다음과 같이 보입니다: https://i.stack.imgur.com/CF5ZV.png . ▁it
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;
}
랩 요소 주위에 흰색 테두리만 있습니다.
.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>
부스트를 합니다..form-group수업. 당신의 경우는 다음과 같습니다.
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
이 게시물이 조금 오래된 것으로 알고 있지만, 저는 같은 문제에 부딪혔습니다.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>
그룹 사이에 공간을 만들기 위해 site.css 파일에서 bootstrap의 마진 -15px를 마이너스 마진을 5만큼 줄여 재정의했습니다.
제가 한 일은...
.form-group {
margin-right: -10px;
}
이것이 다른 사람에게 도움이 되길 바랍니다.
모바일에서 한 개의 열과 태블릿 초상화에서 두 개의 열이 필요했습니다. 중간에 동일한 간격으로 있어야 합니다(열 안에 그리드가 추가되지 않은 경우도 있습니다).하고 간격유티사의숫수있생다니에 있는 할 수 .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>
부트스트랩 콜은 왼쪽과 오른쪽 모두에서 약간의 공백을 사용합니다.나는 방금 div와 같은 블록 요소를 추가하고 차이에 대한 경계를 설정했습니다.또한, 그 여분의 디브이에 여분의 패딩이나 여백을 추가하는 것은 완벽하게 작동할 것입니다.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>
<div class="container">
<div class="row">
<div class="col-6 ">
<div class="border border-danger ">
<h2 class="text-center">1</h2>
</div>
</div>
<div class="col-6">
<div class="border border-warning">
<h2 class="text-center">2</h2>
</div>
</div>
</div>
</div>부트스트랩만으로는 불가능할 것 같습니다.열 사이의 공간은 자동으로 추가/유지됩니다.열 사이에 특정 너비를 추가해야 하는 경우 다음 방법을 사용하여 공간을 시뮬레이션할 수 있습니다. https://jsfiddle.net/loginet/3rogbh9s/5/
<div class="row">
<div class="col-6">
<div class="left-column">Left column</div>
</div>
<div class="col-6">
<div class="right-column">Right column</div>
</div>
</div>
및 CSS
.left-column {
padding: 10px;
padding-right: 50px;
background: white;
}
.right-column {
padding: 10px;
padding-left: 50px;
background: white;
}
CSS를 사용하여 배경과 같은 색상의 테두리를 추가하는 것은 어떻습니까?저는 처음이라 안 할 이유가 있을 수도 있지만, 먹어보니 좋아 보였어요.
를 설정해야 합니다.padding표준 부트스트랩의 레이아웃에 있습니다.
@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>이것은 유용할 것입니다.
.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>상자 오른쪽에서 여백을 더 늘리거나 줄이려면 목록 항목의 여백 오른쪽 속성을 편집합니다.
샘플 출력
<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;
}
<div class="col-md-6">
<div class="inner">
<!-- Put the col-6 elements in the inner div -->
</div>
</div>
이것은 기본적으로 필요한 방식으로 외부 div 내부에 일부 패딩을 제공합니다.또한 사용자 지정 CSS를 사용하여 패딩을 수정할 수도 있습니다.
심플 웨이
.row div{
padding-left: 8px;
padding-right: 8px;
}
부트스트랩 4
설명서의 내용은 다음과 같습니다(여기 참조).
행은 열의 래퍼입니다.각 열에는 간격을 제어하기 위한 수평 패딩(거터라고 함)이 있습니다.그런 다음 이 패딩은 음의 여백이 있는 행에서 대응됩니다.이렇게 하면 열의 모든 내용이 왼쪽 아래로 시각적으로 정렬됩니다.
그래서 정답은 다음과 같습니다: 세트.cols의 패딩 - 왼쪽/오른쪽은 당신의 것을 뺀 것과 같습니다.row왼쪽/오른쪽 여백그 정도로 간단하죠.
#my-row {
margin-left: -80px;
margin-right: -80px;
}
#my-col {
padding-left: 80px;
padding-right: 80px;
}
데모: https://codepen.io/frouo/pen/OqGaWN
클래스를 만들고 다음을 사용합니다.
마진: 1.5em.5em; 최대 폭: calc(50% - 1em)!중요;
여기서 최대 너비의 1em은 왼쪽/오른쪽 여백을 합한 것과 같습니다.
언급URL : https://stackoverflow.com/questions/18738712/how-to-add-spacing-between-columns
'programing' 카테고리의 다른 글
| 스위프트를 사용하여 iOS 10에서 전화를 거는 방법은 무엇입니까? (0) | 2023.08.18 |
|---|---|
| 파이썬 또는 R을 사용하여 엑셀에서 대체 텍스트가 있는 그래프를 PDF로 내보내는 방법은 무엇입니까? (0) | 2023.08.18 |
| 스피너의 가치를 얻는 방법은? (0) | 2023.08.18 |
| 버튼 더블 클릭을 방지하는 Android (0) | 2023.08.18 |
| 데이터베이스에 대한 연결을 언제 열거나 닫아야 합니까? (MariaDB / node.js) (0) | 2023.08.18 |