반응형
부트 스트랩의 7 개의 동일한 열
누군가 부트 스트랩에서 7 개의 동일한 열을 얻을 수있는 방법을 설명 할 수 있는지 궁금합니다. 달력을 만들려고합니다. 이 코드는 5를 수행하는 것 같습니다.
div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
내 주요 콘텐츠에는 다음과 같은 클래스가 있으므로 여기에 7 개의 열을 배치하고 싶습니다.
col-lg-12
이것이 가능하거나 대신 짝수를 고수해야하는 경우 누구든지 설명 할 수 있습니까?
글쎄, IMO는 아마도 widthCSS3 @media쿼리 를 사용하여 열 을 재정의해야 할 것입니다 .
다음은 7 콜 그리드 시스템을 만들려는 시도입니다.
<div class="container">
<div class="row seven-cols">
<div class="col-md-1">Col 1</div>
<div class="col-md-1">Col 2</div>
<div class="col-md-1">Col 3</div>
<div class="col-md-1">Col 4</div>
<div class="col-md-1">Col 5</div>
<div class="col-md-1">Col 6</div>
<div class="col-md-1">Col 7</div>
</div>
</div>
@media (min-width: 768px){
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 100%;
*width: 100%;
}
}
@media (min-width: 992px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
/**
* The following is not really needed in this case
* Only to demonstrate the usage of @media for large screens
*/
@media (min-width: 1200px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
의 가치 width는 다음과 같습니다.
width = 100% / 7 column-number = 14.285714285714285714285714285714%
작업 데모-( jsbin )
코드 조각을 실행하고 "전체 페이지"를 클릭합니다.
.col-md-1 {
background-color: gold;
}
@media (min-width: 768px){
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 100%;
*width: 100%;
}
}
@media (min-width: 992px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
@media (min-width: 1200px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row seven-cols">
<div class="col-md-1">Col 1</div>
<div class="col-md-1">Col 2</div>
<div class="col-md-1">Col 3</div>
<div class="col-md-1">Col 4</div>
<div class="col-md-1">Col 5</div>
<div class="col-md-1">Col 6</div>
<div class="col-md-1">Col 7</div>
</div>
</div>다른 옵션
또한 Custom Builder ( @grid-columns, ... 변경) 를 사용하여 Twitter Bootstrap의 7 열 버전을 직접 빌드 할 수 있습니다 .
더 적은 컴파일러를 사용하는 경우 더 적은 버전의 Twitter Bootstrap ( Github에서 )을 다운로드하고 대신 파일을 편집 할 수variables.less 있습니다.
거의 동일 , 빠른 솔루션입니다. 사용자 지정 CSS없이.
<div class="col-md-4">
<div class="row">
<div class="col-md-4"></div> <!-- this column empty -->
<div class="col-md-4"> 1 </div>
<div class="col-md-4"> 2 </div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-2"> 3 </div>
<div class="col-md-2"> 4 </div>
<div class="col-md-2"> 5 </div>
<div class="col-md-2"> 6 </div>
<div class="col-md-2"> 7 </div>
<div class="col-md-2"></div> <!-- this column empty -->
</div>
</div>
Bootstrap 4로 업그레이드하는 것이 좋은 선택 일 것입니다.
동일한 너비의 열을위한 클래스 col 제공
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
https://v4-alpha.getbootstrap.com/layout/grid/#equal-width
팁 : 화면이 md보다 낮을 때 새 줄에서 열을 나누려면 각 열 뒤에 다음 div를 추가합니다.
<div class='w-100 d-md-none'></div>
.w-100은 새 줄로 나누고 .d-md-done은 md보다 넓은 화면에서 div를 숨 깁니다.
따라서 다음을 제공합니다.
<div class="row">
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
</div>
나는 이것에 대한 더 정확한 해결책을 원했기 때문에 특별한 행 / 열 클래스 세트를 만들었습니다 (의미 상 달력 개념과 연결됨).
이것은 Bootstrap이 기본 그리드를 구축하는 방식을 벗어납니다 ( grid-framework.less). 그것은 유지 xs, sm, md, 및 lg다른 뷰포트에서 그리드를 사용자 정의 클래스를.
참고 : 여기에는 그리드 스타일이 포함됩니다. 실제로 달력처럼 보이게 하려면 나머지를 작성해야합니다 .
마크 업
<div class="row">
<div class="col-xs-7">
<div class="calendar">
<div class="calendar-row">
<div class="calendar-xs-1">Sunday</div>
<div class="calendar-xs-1">Monday</div>
<div class="calendar-xs-1">Tuesday</div>
<div class="calendar-xs-1">Wednesday</div>
<div class="calendar-xs-1">Thursday</div>
<div class="calendar-xs-1">Friday</div>
<div class="calendar-xs-1">Saturday</div>
</div>
</div>
</div>
<div class="col-xs-5">
This container intentionally left blank.
</div>
</div>
그만큼 .less
/*
* Calendar grid
*/
@calendar-columns: 7;
@calendar-gutter-width: 0px;
.make-calendar-columns() {
// Common styles for all sizes of calendar columns, widths 1-12
.cal(@index) when (@index = 1) { // initial
@item: ~".calendar-xs-@{index}, .calendar-sm-@{index}, .calendar-md-@{index}, .calendar-lg-@{index}";
.cal((@index + 1), @item);
}
.cal(@index, @list) when (@index =< @calendar-columns) { // general; "=<" isn't a typo
@item: ~".calendar-xs-@{index}, .calendar-sm-@{index}, .calendar-md-@{index}, .calendar-lg-@{index}";
.cal((@index + 1), ~"@{list}, @{item}");
}
.cal(@index, @list) when (@index > @calendar-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@calendar-gutter-width / 2);
padding-right: (@calendar-gutter-width / 2);
}
}
.cal(1); // kickstart it
}
.float-calendar-columns(@class) {
.cal(@index) when (@index = 1) { // initial
@item: ~".calendar-@{class}-@{index}";
.cal((@index + 1), @item);
}
.cal(@index, @list) when (@index =< @calendar-columns) { // general
@item: ~".calendar-@{class}-@{index}";
.cal((@index + 1), ~"@{list}, @{item}");
}
.cal(@index, @list) when (@index > @calendar-columns) { // terminal
@{list} {
float: left;
}
}
.cal(1); // kickstart it
}
.calc-calendar-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.calendar-@{class}-@{index} {
width: percentage((@index / @calendar-columns));
}
}
.calc-calendar-column(@index, @class, @type) when (@type = push) and (@index > 0) {
.calendar-@{class}-push-@{index} {
left: percentage((@index / @calendar-columns));
}
}
.calc-calendar-column(@index, @class, @type) when (@type = push) and (@index = 0) {
.calendar-@{class}-push-0 {
left: auto;
}
}
.calc-calendar-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
.calendar-@{class}-pull-@{index} {
right: percentage((@index / @calendar-columns));
}
}
.calc-calendar-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
.calendar-@{class}-pull-0 {
right: auto;
}
}
.calc-calendar-column(@index, @class, @type) when (@type = offset) {
.calendar-@{class}-offset-@{index} {
margin-left: percentage((@index / @calendar-columns));
}
}
// Basic looping in LESS
.loop-calendar-columns(@index, @class, @type) when (@index >= 0) {
.calc-calendar-column(@index, @class, @type);
// next iteration
.loop-calendar-columns((@index - 1), @class, @type);
}
// Create grid for specific class
.make-calendar(@class) {
.float-calendar-columns(@class);
.loop-calendar-columns(@grid-columns, @class, width);
.loop-calendar-columns(@grid-columns, @class, pull);
.loop-calendar-columns(@grid-columns, @class, push);
.loop-calendar-columns(@grid-columns, @class, offset);
}
// Row
//
// Rows contain and clear the floats of your columns.
.calendar-row {
.make-row(@calendar-gutter-width);
}
// Columns
//
// Common styles for small and large grid columns
.make-calendar-columns();
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
.make-calendar(xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: @screen-sm-min) {
.make-calendar(sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
.make-calendar(md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) {
.make-calendar(lg);
}
Antony Gibbs 답변에 따라 Boostrap 4 " col "css 클래스를 사용하면됩니다.
<div class="row">
<div class="col">Mon</div>
<div class="col">Tue</div>
<div class="col">Wen</div>
<div class="col">Thu</div>
<div class="col">Fri</div>
<div class="col">Sat</div>
<div class="col">Sun</div>
</div>
부트 스트랩 4가 반드시 필요한 것은 아닙니다. BS4에서 CSS 선언을 자신의 스타일 시트로 간단히 복사 할 수 있습니다.
/* Equal width */
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
/* Add gutters */
.col {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
이는 일단 마이그레이션하면 BS4가 준비된다는 장점이 있으며 5, 7, 9 또는 11 컬럼을 사용할 수있는 가능성도 제공합니다.
https://getbootstrap.com/docs/4.0/layout/grid/#equal-width
여기서 문제는 홀수가 홀수이므로 대칭을 얻을 수 없다는 것입니다. 모든 열이 일주일 중 하루이기 때문에 모든 주중에는 col-md-2수업이 있고 다른 두 열에는 수업 이 있다고 말할 수 col-md-1있습니다.
이 접근 방식은 토요일과 일요일에 더 적은 공간이 필요하다는 가정을 기반으로 작동하지만 이것이 귀하의 시나리오에 맞는지 모르겠습니다.
<div class="row">
<div class="col-md-2">Mon</div>
<div class="col-md-2">Tue</div>
<div class="col-md-2">Wen</div>
<div class="col-md-2">Thu</div>
<div class="col-md-2">Fri</div>
<div class="col-md-1">Sat</div>
<div class="col-md-1">Sun</div>
</div>
<div class="row">
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
</div>
데모가 있습니다.
@Brad 귀하의 대답은 훌륭하고 우아했습니다. sass를 사용하는 사람들을 위해 약간 수정했습니다. 코드의 주석은 내 것이 아니라 github 부트 스트랩 코드베이스의 주석 일뿐입니다. 참조를 위해 그대로 두었습니다.
HTML
<div class="row">
<div class="col-xs-12">
<div class="calendar">
<div class="calendar-row header">
<div class="calendar-xs-1">Sunday</div>
<div class="calendar-xs-1">Monday</div>
<div class="calendar-xs-1">Tuesday</div>
<div class="calendar-xs-1">Wednesday</div>
<div class="calendar-xs-1">Thursday</div>
<div class="calendar-xs-1">Friday</div>
<div class="calendar-xs-1">Saturday</div>
</div>
</div>
</div>
</div>
SASS
// Calendar grid generation
//
$calendar-columns: 7;
$calendar-gutter-width: $grid-gutter-width;
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-calendar-columns() {
$list: '';
$i: 1;
$list: ".calendar-xs-#{$i}, .calendar-sm-#{$i}, .calendar-md-#{$i}, .calendar-lg-#{$i}";
@for $i from (1 + 1) through $calendar-columns {
$list: "#{$list}, .calendar-xs-#{$i}, .calendar-sm-#{$i}, .calendar-md-#{$i}, .calendar-lg-#{$i}";
}
#{$list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: ($calendar-gutter-width / 2);
padding-right: ($calendar-gutter-width / 2);
}
}
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-calendar-columns($class) {
$list: '';
$i: 1;
$list: ".calendar-#{$class}-#{$i}";
@for $i from (1 + 1) through $calendar-columns {
$list: "#{$list}, .calendar-#{$class}-#{$i}";
}
#{$list} {
float: left;
}
}
@mixin calc-calendar-column($index, $class, $type) {
@if ($type == width) and ($index > 0) {
.calendar-#{$class}-#{$index} {
width: percentage(($index / $calendar-columns));
}
}
@if ($type == push) and ($index > 0) {
.calendar-#{$class}-push-#{$index} {
left: percentage(($index / $calendar-columns));
}
}
@if ($type == push) and ($index == 0) {
.calendar-#{$class}-push-0 {
left: auto;
}
}
@if ($type == pull) and ($index > 0) {
.calendar-#{$class}-pull-#{$index} {
right: percentage(($index / $calendar-columns));
}
}
@if ($type == pull) and ($index == 0) {
.calendar-#{$class}-pull-0 {
right: auto;
}
}
@if ($type == offset) {
.calendar-#{$class}-offset-#{$index} {
margin-left: percentage(($index / $calendar-columns));
}
}
}
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin loop-calendar-columns($calendar-columns, $class, $type) {
@for $i from 0 through $calendar-columns {
@include calc-calendar-column($i, $class, $type);
}
}
// Create grid for specific class
@mixin make-calendar($class) {
@include float-calendar-columns($class);
@include loop-calendar-columns($calendar-columns, $class, width);
@include loop-calendar-columns($calendar-columns, $class, pull);
@include loop-calendar-columns($calendar-columns, $class, push);
@include loop-calendar-columns($calendar-columns, $class, offset);
}
// Row
//
// Rows contain and clear the floats of your columns.
.row {
@include make-row($calendar-gutter-width);
}
// Columns
//
// Common styles for small and large grid columns
@include make-calendar-columns();
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
@include make-calendar(xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: $screen-sm-min) {
@include make-calendar(sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: $screen-md-min) {
@include make-calendar(md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: $screen-lg-min) {
@include make-calendar(lg);
}
12 열 부트 스트랩 레이아웃을 7 개의 동일한 부분으로 나누어야합니다. CSS 레이아웃을 변경하면 14 열 레이아웃으로 화면을 13 개의 동일한 부분으로 나누는 것과 동일한 문제에 직면하게됩니다.
게다가 열 레이아웃을 변경하면 많은 재 설계 작업을 수행 할 수 있습니다. 따라서 대신 테이블을 사용하는 것이 좋습니다. 이렇게
<div class='container-fuid'>
<table class='table'> <!-- add style="table-layout:fixed;" so that table do not vary in width due to text size variations -->
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
cols와 동일한 효과가 있지만 PHP 또는 기타 프로그램으로 화면에 임의의 수의 동일한 블록을 인쇄해야하는 경우에 따라 더 빠릅니다.
프로세스 흐름 디스플레이에서와 같이 다음 스크립트는 표준 12 열 화면을 원하는만큼의 열 / 디스플레이 단위로 나누는 방법에 대한 아이디어를 제공 할 수 있습니다.
$cols = 15; /* arbitary number of columns */
/* generate data array */
$data_array = array();
for($i=0 ; $i<$cols ; $i++){
$data_array[] = 'Value : '.$i ;
}
/* use the array to get the screen in that many columns */
echo "<div class='container'>";
echo "<table class='table'>";
echo "<tr>";
foreach($data_array as $key => $value){
echo "<td>".$value."</td>";
}
echo "</tr>";
echo "</table>";
echo "</div>";
나는 그것을 간단한 방법으로 해결했다. 방금 부트 스트랩의 양쪽 맞춤 버튼 그룹, 7 개의 양쪽 버튼을 사용했지만 실제 버튼 대신 버튼 컨테이너 div에서 스팬을 사용하고 불필요한 클래스를 무효화했습니다. (주간 달력에도 해당)
<div class="col-xs-12">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group day" role="group">
<div class="btn btn-default nopadding nocurs">
<span class="day">אי</span>
<span class="day">26/06</span>
<div class="status">פנוי</div>
</div>
</div>
<div class="btn-group day" role="group">
<div class="btn btn-default nopadding nocurs">
<span class="day">בי</span>
<span class="day">27/06</span>
<div class="status closed">מלה</div>
</div>
</div>
<div class="btn-group day" role="group">
<div class="btn btn-default nopadding nocurs">
<span class="day">גי</span>
<span class="day">28/06</span>
<div class="status">פנוי</div>
</div>
</div>
<div class="btn-group day" role="group">
<div class="btn btn-default nopadding nocurs">
<span class="day">די</span>
<span class="day">29/06</span>
<div class="status closed">מלה</div>
</div>
</div>
<div class="btn-group day" role="group">
<div class="btn btn-default nopadding nocurs">
<span class="day">הי</span>
<span class="day">30/06</span>
<div class="status closed">מלה</div>
</div>
</div>
<div class="btn-group day" role="group">
<div class="btn btn-default nopadding">
<span class="day">שי</span>
<span class="day">31/06</span>
<div class="status">פנוי</div>
</div>
</div>
</div>
</div>
2/7 또는 3/7 열을 원하고 개발에 LESS CSS를 사용하는 경우를 대비하여. 참조 : https://gist.github.com/kanakiyajay/15e4fc98248956614643
HTML
<div class="seven-cols">
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-3"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
적게
/* CSS for 7 column responsive
-------------------------------------------------- */
@media (min-width: 768px){
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1,
.seven-cols .col-md-2,
.seven-cols .col-sm-2,
.seven-cols .col-lg-2,
.seven-cols .col-md-3,
.seven-cols .col-sm-3,
.seven-cols .col-lg-3 {
width: 100%;
*width: 100%;
}
}
@media (min-width: 992px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 100%*(1/7);
*width: 100%*(1/7);
}
.seven-cols .col-md-2,
.seven-cols .col-sm-2,
.seven-cols .col-lg-2 {
width: 100%*(2/7);
*width: 100%*(2/7);
}
.seven-cols .col-md-3,
.seven-cols .col-sm-3,
.seven-cols .col-lg-3 {
width: 100%*(3/7);
*width: 100%*(3/7);
}
}
너비의 100 %를 사용할 필요가없는 경우 열을 9 개의 동일한 조각으로 분할하고 내부에있는 조각 만 사용할 수 있습니다.
<div class="row" style="border: solid 1px black; height: 200px;">
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-md-offset-4" id="Col1" style="border: solid 1px black; height: 200px;"></div>
<div class="col-md-4" id="Col2" style="border: solid 1px black; height: 200px;"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4" id="Col3" style="border: solid 1px black; height: 200px;"></div>
<div class="col-md-4" id="Col4" style="border: solid 1px black; height: 200px;"></div>
<div class="col-md-4" id="Col5" style="border: solid 1px black; height: 200px;"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4" id="Col6" style="border: solid 1px black; height: 200px;"></div>
<div class="col-md-4" id="Col7" style="border: solid 1px black; height: 200px;"></div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-xs-5">
<div class="row">
<div class="col-sm-4">01</div>
<div class="col-sm-4">02</div>
<div class="col-sm-4">03</div>
</div>
</div>
<div class="col-xs-2">
<div class="row">
<div class="col-sm-12">04</div>
</div>
</div>
<div class="col-xs-5">
<div class="row">
<div class="col-sm-4">05</div>
<div class="col-sm-4">06</div>
<div class="col-sm-4">07</div>
</div>
</div>
</div>
</div>
</div>
이미 Bootstrap을 사용하고 있으므로 SCSS에 익숙하다면 Bootstrap의 기존 믹스 인 중 하나를 활용하여 특정 컨테이너로 범위가 지정된 클래스로 사용자 지정 7 열 그리드 시스템을 만들 수 있습니다.
my_custom_app.scss :
//include bootstrap SCSS (for variables and mixins)
@import '../node_modules/bootstrap/scss/bootstrap';
//overwrite 2 bootstrap variables
$grid-columns: 7;
$grid-gutter-width: 4px;
//define your custom container
#task_week {
//call bootstrap's mixin
@include make-grid-columns();
}
my_custom_app.scss 를 컴파일 하면 mixin은 col-x결과 CSS 파일에 필요한 모든 클래스를 자동으로 생성합니다. 여기에 마음이 약한 사람들을 위해 여기에 포함 시켰습니다.
#task_week {}
#task_week .col-1, #task_week .col-2, #task_week .col-3, #task_week .col-4, #task_week .col-5, #task_week .col-6, #task_week .col-7, #task_week .col-8, #task_week .col-9, #task_week .col-10, #task_week .col-11, #task_week .col-12, #task_week .col,
#task_week .col-auto, #task_week .col-sm-1, #task_week .col-sm-2, #task_week .col-sm-3, #task_week .col-sm-4, #task_week .col-sm-5, #task_week .col-sm-6, #task_week .col-sm-7, #task_week .col-sm-8, #task_week .col-sm-9, #task_week .col-sm-10, #task_week .col-sm-11, #task_week .col-sm-12, #task_week .col-sm,
#task_week .col-sm-auto, #task_week .col-md-1, #task_week .col-md-2, #task_week .col-md-3, #task_week .col-md-4, #task_week .col-md-5, #task_week .col-md-6, #task_week .col-md-7, #task_week .col-md-8, #task_week .col-md-9, #task_week .col-md-10, #task_week .col-md-11, #task_week .col-md-12, #task_week .col-md,
#task_week .col-md-auto, #task_week .col-lg-1, #task_week .col-lg-2, #task_week .col-lg-3, #task_week .col-lg-4, #task_week .col-lg-5, #task_week .col-lg-6, #task_week .col-lg-7, #task_week .col-lg-8, #task_week .col-lg-9, #task_week .col-lg-10, #task_week .col-lg-11, #task_week .col-lg-12, #task_week .col-lg,
#task_week .col-lg-auto, #task_week .col-xl-1, #task_week .col-xl-2, #task_week .col-xl-3, #task_week .col-xl-4, #task_week .col-xl-5, #task_week .col-xl-6, #task_week .col-xl-7, #task_week .col-xl-8, #task_week .col-xl-9, #task_week .col-xl-10, #task_week .col-xl-11, #task_week .col-xl-12, #task_week .col-xl,
#task_week .col-xl-auto, #task_week .col-1, #task_week .col-2, #task_week .col-3, #task_week .col-4, #task_week .col-5, #task_week .col-6, #task_week .col-7, #task_week .col,
#task_week .col-auto, #task_week .col-sm-1, #task_week .col-sm-2, #task_week .col-sm-3, #task_week .col-sm-4, #task_week .col-sm-5, #task_week .col-sm-6, #task_week .col-sm-7, #task_week .col-sm,
#task_week .col-sm-auto, #task_week .col-md-1, #task_week .col-md-2, #task_week .col-md-3, #task_week .col-md-4, #task_week .col-md-5, #task_week .col-md-6, #task_week .col-md-7, #task_week .col-md,
#task_week .col-md-auto, #task_week .col-lg-1, #task_week .col-lg-2, #task_week .col-lg-3, #task_week .col-lg-4, #task_week .col-lg-5, #task_week .col-lg-6, #task_week .col-lg-7, #task_week .col-lg,
#task_week .col-lg-auto, #task_week .col-xl-1, #task_week .col-xl-2, #task_week .col-xl-3, #task_week .col-xl-4, #task_week .col-xl-5, #task_week .col-xl-6, #task_week .col-xl-7, #task_week .col-xl,
#task_week .col-xl-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 2px;
padding-left: 2px; }
#task_week .col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-first {
order: -1; }
#task_week .order-last {
order: 8; }
#task_week .order-0 {
order: 0; }
#task_week .order-1 {
order: 1; }
#task_week .order-2 {
order: 2; }
#task_week .order-3 {
order: 3; }
#task_week .order-4 {
order: 4; }
#task_week .order-5 {
order: 5; }
#task_week .order-6 {
order: 6; }
#task_week .order-7 {
order: 7; }
#task_week .offset-1 {
margin-left: 14.2857142857%; }
#task_week .offset-2 {
margin-left: 28.5714285714%; }
#task_week .offset-3 {
margin-left: 42.8571428571%; }
#task_week .offset-4 {
margin-left: 57.1428571429%; }
#task_week .offset-5 {
margin-left: 71.4285714286%; }
#task_week .offset-6 {
margin-left: 85.7142857143%; }
@media (min-width: 576px) {
#task_week .col-sm {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-sm-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-sm-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-sm-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-sm-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-sm-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-sm-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-sm-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-sm-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-sm-first {
order: -1; }
#task_week .order-sm-last {
order: 8; }
#task_week .order-sm-0 {
order: 0; }
#task_week .order-sm-1 {
order: 1; }
#task_week .order-sm-2 {
order: 2; }
#task_week .order-sm-3 {
order: 3; }
#task_week .order-sm-4 {
order: 4; }
#task_week .order-sm-5 {
order: 5; }
#task_week .order-sm-6 {
order: 6; }
#task_week .order-sm-7 {
order: 7; }
#task_week .offset-sm-0 {
margin-left: 0; }
#task_week .offset-sm-1 {
margin-left: 14.2857142857%; }
#task_week .offset-sm-2 {
margin-left: 28.5714285714%; }
#task_week .offset-sm-3 {
margin-left: 42.8571428571%; }
#task_week .offset-sm-4 {
margin-left: 57.1428571429%; }
#task_week .offset-sm-5 {
margin-left: 71.4285714286%; }
#task_week .offset-sm-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 768px) {
#task_week .col-md {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-md-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-md-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-md-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-md-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-md-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-md-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-md-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-md-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-md-first {
order: -1; }
#task_week .order-md-last {
order: 8; }
#task_week .order-md-0 {
order: 0; }
#task_week .order-md-1 {
order: 1; }
#task_week .order-md-2 {
order: 2; }
#task_week .order-md-3 {
order: 3; }
#task_week .order-md-4 {
order: 4; }
#task_week .order-md-5 {
order: 5; }
#task_week .order-md-6 {
order: 6; }
#task_week .order-md-7 {
order: 7; }
#task_week .offset-md-0 {
margin-left: 0; }
#task_week .offset-md-1 {
margin-left: 14.2857142857%; }
#task_week .offset-md-2 {
margin-left: 28.5714285714%; }
#task_week .offset-md-3 {
margin-left: 42.8571428571%; }
#task_week .offset-md-4 {
margin-left: 57.1428571429%; }
#task_week .offset-md-5 {
margin-left: 71.4285714286%; }
#task_week .offset-md-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 992px) {
#task_week .col-lg {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-lg-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-lg-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-lg-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-lg-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-lg-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-lg-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-lg-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-lg-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-lg-first {
order: -1; }
#task_week .order-lg-last {
order: 8; }
#task_week .order-lg-0 {
order: 0; }
#task_week .order-lg-1 {
order: 1; }
#task_week .order-lg-2 {
order: 2; }
#task_week .order-lg-3 {
order: 3; }
#task_week .order-lg-4 {
order: 4; }
#task_week .order-lg-5 {
order: 5; }
#task_week .order-lg-6 {
order: 6; }
#task_week .order-lg-7 {
order: 7; }
#task_week .offset-lg-0 {
margin-left: 0; }
#task_week .offset-lg-1 {
margin-left: 14.2857142857%; }
#task_week .offset-lg-2 {
margin-left: 28.5714285714%; }
#task_week .offset-lg-3 {
margin-left: 42.8571428571%; }
#task_week .offset-lg-4 {
margin-left: 57.1428571429%; }
#task_week .offset-lg-5 {
margin-left: 71.4285714286%; }
#task_week .offset-lg-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 1200px) {
#task_week .col-xl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-xl-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-xl-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-xl-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-xl-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-xl-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-xl-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-xl-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-xl-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-xl-first {
order: -1; }
#task_week .order-xl-last {
order: 8; }
#task_week .order-xl-0 {
order: 0; }
#task_week .order-xl-1 {
order: 1; }
#task_week .order-xl-2 {
order: 2; }
#task_week .order-xl-3 {
order: 3; }
#task_week .order-xl-4 {
order: 4; }
#task_week .order-xl-5 {
order: 5; }
#task_week .order-xl-6 {
order: 6; }
#task_week .order-xl-7 {
order: 7; }
#task_week .offset-xl-0 {
margin-left: 0; }
#task_week .offset-xl-1 {
margin-left: 14.2857142857%; }
#task_week .offset-xl-2 {
margin-left: 28.5714285714%; }
#task_week .offset-xl-3 {
margin-left: 42.8571428571%; }
#task_week .offset-xl-4 {
margin-left: 57.1428571429%; }
#task_week .offset-xl-5 {
margin-left: 71.4285714286%; }
#task_week .offset-xl-6 {
margin-left: 85.7142857143%; } }
#task_week div {
text-align: center; }
#task_week div .dow_day {
display: block;
font-size: 16px;
color: #4be4ff;
font-weight: normal; }
#task_week div .dow_date {
font-size: 12px;
display: block;
margin: 0;
margin-bottom: 10px;
font-weight: normal; }
#task_week .list-group-item, #task_week .list-group-item * {
cursor: pointer; }
#task_week .list-group-item:hover {
background-color: #161919; }
#task_week .col:not(:last-child) {
border-right: 1px solid #444;
margin-bottom: 20px; }
마지막으로 HTML에서 기본 12 열 그리드처럼 래퍼 div와 열을 정의하기 만하면됩니다.
<div id="task_week">
<div class="row no-gutters">
<div class="col-sm-7 col-lg-1">Monday</div>
<div class="col-sm-7 col-lg-1">Tuesday</div>
<div class="col-sm-7 col-lg-1">Wednesday</div>
<div class="col-sm-7 col-lg-1">Thursday</div>
<div class="col-sm-7 col-lg-1">Friday</div>
<div class="col-sm-7 col-lg-1">Saturday</div>
<div class="col-sm-7 col-lg-1">Sunday</div>
</div>
</div>
Bootstrap 3의 그리드 시스템을 사용하면 7 개의 열을 div로 래핑하고 "col-md-offset"클래스를 사용할 수 있습니다. 예를 들면 :
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-3">
<div class="col-md-1 text-center">
<p>COLUMN ONE</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN TWO</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN THREE</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN FOUR</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN FIVE</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN SIX</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN SEVEN</p>
</div>
</div>
</div>
</div>
단점은 열 크기가 10으로 제한된다는 것입니다. 7 개의 열이 전체 화면을 차지하게하려면 다음을 사용할 수 있습니다.
<div class="row text-center">
<h1>CENTERED TEXT</h1>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN ONE</p>
</div>
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN TWO</p>
</div>
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN THREE</p>
</div>
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN FOUR</p>
</div>
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN FIVE</p>
</div>
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN SIX</p>
</div>
<div class="col-md-1 text-center" style="margin-left: 3%;">
<p>COLUMN SEVEN</p>
</div>
</div>
</div>
여기에 코드 펜 : https://codepen.io/dylanprem/pen/BrzKxo?editors=1010
<div class="row">
<div class="col-lg-1">Mon</div>
<div class="col-lg-2">Tue</div>
<div class="col-lg-2">Wen</div>
<div class="col-lg-2">Thu</div>
<div class="col-lg-2">Fri</div>
<div class="col-lg-2">Sat</div>
<div class="col-lg-1">Sun</div>
</div>
Will this solve your problem? The initial and last column space will be reduced, but it doesn't seem to make too much of a difference.
참고URL : https://stackoverflow.com/questions/21955088/7-equal-columns-in-bootstrap
반응형
'programing tip' 카테고리의 다른 글
| 개체 목록에서 속성 목록 가져 오기 (0) | 2020.10.24 |
|---|---|
| BIT 필드에 MIN 집계 함수 적용 (0) | 2020.10.23 |
| JPA로 예약어 이름으로 필드 만들기 (0) | 2020.10.23 |
| Python에서 []없이 목록 이해 (0) | 2020.10.23 |
| 자바에서 날짜에 요일 추가 (0) | 2020.10.23 |