수평 스크롤바없이 부트 스트랩 3 유동 레이아웃을 만드는 방법
다음은 샘플 링크입니다. http://bootply.com/76369
이것은 내가 사용하는 html입니다.
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
부트 스트랩 3에는 container-fluid 및 row-fluid가 없습니다.
고정 레이아웃이되므로 .container 클래스로 래핑 할 수 없습니다.
유동적 인 (전체 페이지 너비) 레이아웃 을 만드는 방법은 무엇입니까? ( 가로 스크롤바 없음 )
이 마크 업으로. 결과를 볼 때 x- 스크롤 막대가 표시되므로 왼쪽과 오른쪽으로 스크롤하면 안됩니다.
수정 됨 : 2015-12-09
이미 답변을 받았으며 Bootstrap은 이미 3.1.0 이후 수정 사항을 출시했습니다.
이것은 v3.1.0에서 도입되었습니다 : http://getbootstrap.com/css/#grid-example-fluid
커밋 # 62736046 은 "전폭 컨테이너 및 레이아웃에 대한 .container-fluid 변형"을 추가했습니다.
나는 또한 그것을 가지고 있고 그들이 그것을 고칠 때까지 기다리는 동안이 수치스러운 CSS를 추가했습니다.
body { overflow-x: hidden;}
끔찍한 대안이지만 작동합니다. 문제가 해결되면 제거해 드리겠습니다.
문제 에서 지적한 다른 대안 은 다음을 재정의하는 것입니다 .row.
.row {
margin-left: 0px;
margin-right: 0px;
}
이것은 BS 3의 알려진 문제입니다-https://github.com/twbs/bootstrap/issues/9862?
source=cc
최신 빌드를 사용하여 Bootply에서 테스트 했으므로 GitHub에서 최신 업데이트 / 수정을 계속 시청하십시오.
Bootstrap 3에서는 행의 음수 여백에 대응하기 .row위해 .container또는 내부에서 사용해야합니다 .container-fluid. 이것은 수평 스크롤바를 제거합니다.
문서에서 ...
"적절한 정렬 및 패딩을 위해 행은 .container (고정 너비) 또는 .container-fluid (전체 너비) 내에 배치되어야합니다."
부트 스트랩 4
container> row> col3.x를 같은 관계 일 같은 방법으로 ...
"컨테이너는 부트 스트랩에서 가장 기본적인 레이아웃 요소이며 기본 그리드 시스템을 사용할 때 필요합니다."
내가 올바르게 이해한다면 미디어 쿼리 후에 이것을 추가하면 기본 그리드의 너비 제한이 무시됩니다. 100 % 너비 레이아웃이 필요한 부트 스트랩 3에서 나를 위해 작동합니다.
.container {
max-width: 100%;
/* This will remove the outer padding, and push content edge to edge */
padding-right: 0;
padding-left: 0;
}
그런 다음 컨테이너 내부에 행 및 그리드 요소를 넣을 수 있습니다.
Bootstrap 문서에서 2014 년 업데이트 :
그리드 및 전체 너비 레이아웃 완전히 유동적 인 레이아웃 (사이트가 뷰포트의 전체 너비를 확장 함을 의미 함)을 만들려는 사용자는 패딩이 있는 포함 요소에 그리드 콘텐츠를 래핑해야합니다 . 0 15px; 여백 오프셋 : 0-15px; .rows에 사용됩니다.
여기 내 2 센트 만. 대부분 이것은 나에게 그랬던 것처럼 당신을 위해 일할 것입니다.
body > .row {
margin-left: 0px;
margin-right: 0px;
}
나는 같은 문제에 부딪 혔지만 (유동적 인 레이아웃을 원함) 작은 화면에서 열을 재배 열하는 등 반응 형 옵션을 유지하기를 원했고 결국 variables.less에서 약간의 변경으로 끝났습니다.
// Large screen / wide desktop (last row of file)
@container-lg-desktop: 100%; //((1140px + @grid-gutter-width));
이 값은 grid.less 및 sets에서 한 번 사용됩니다.
@media (min-width: @screen-lg-desktop) {
.container {
max-width: @container-lg-desktop;
}
....
}
결과적으로 1200px 이상 그리드가 유동적입니다 (가로 스크롤바 없음). 그 아래에는 정상적인 반응 규칙이 적용됩니다. 물론 이것을 다른 미디어 쿼리에도 쉽게 설정할 수 있습니다.
.less를 직접 편집하고 컴파일하지 않으려면 자신의 스타일 시트 similair의 maxwidth를 아래와 같이 재정의 할 수 있습니다.
@media (min-width: 1200px) { /* or min-width: wherever-you-want-your-fluid-breakpoint */
body .container {
max-width: 100%;
}
}
이 모든 것은 다음과 같이 컨테이너를 포함하여 일반 부트 스트랩 그리드 구문을 사용한다고 가정합니다.
<div class="container">
<div class="row" >
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
도움이 되었기를 바랍니다!
최신 버전의 Twitter Bootstrap에서 레이아웃은 기본적으로 유동적이므로 레이아웃을 유동적으로 선언하기 위해 추가 클래스가 필요하지 않습니다.
추가로 참조 할 수 있습니다-
http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ http://blog.getbootstrap.com/
이것은 나를 위해 일했습니다. FF, Chrome, IE11, IE10에서 테스트 됨
.row {
width:99.99%;
}
가로 스크롤바는 container-fluiddiv가 body.
container-fluid구조 를 사용하는 올바른 방법 은 다음과 같습니다.
<body>
<section>
<div class="container-fluid">
<div class="row">
<!-- content goes here -->
</div>
</div>
</section>
</body>
그래서, 당신의 포장 시도 container-fluid등으로 외부 DIV 내부 된 DIV, <div id="wrap">또는 <section>또는 <article>또는 <aside>또는 기타 전문 <div>, 그리고 프레스토를! 수평 스크롤바가 없습니다.
Bootstrap 3에서 본문 바로 아래에 열을 배치하면 가로 스크롤 막대없이 유동적 인 레이아웃이 제공됩니다.
<body>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</body>
Bootstrap 3.0 버전은이 문제에 대한 수정 사항을 추가하고 아마도 Bootstrap 3.1에서 container-fluid를 반환 할 것입니다. 하지만 그때까지 내가 사용하고있는 수정 사항이 있습니다.
먼저 사용자 지정 컨테이너가 필요하고 너비를 100 %로 설정 한 다음 행 여백 처리와 navbar도 수정해야합니다.
/* Custom container */
.container-full {
margin: 0 auto;
width: 100%;
}
/*fix row -15px margin*/
.container-fluid {
padding: 0 15px;
}
/*fix navbar margin*/
.navbar{
margin: 0 -15px;
}
/*fix navbar-right margin*/
.navbar-nav.navbar-right:last-child {
margin-right: 0px;
}
root div에 container-full 및 container-fluid 클래스를 스택 할 수 있으며 나중에 container-fluid를 사용할 수 있습니다.
더 많은 정보가 필요하면 알려주세요.
이 해결 방법을 찾았습니다.
.row {
margin-left: 0;
margin-right: 0;
}
[class^="col-"] > [class^="col-"]:first-child,
[class^="col-"] > [class*=" col-"]:first-child
[class*=" col-"] > [class^="col-"]:first-child,
[class*=" col-"]> [class*=" col-"]:first-child,
.row > [class^="col-"]:first-child,
.row > [class*=" col-"]:first-child{
padding-left: 0px;
}
[class^="col-"] > [class^="col-"]:last-child,
[class^="col-"] > [class*=" col-"]:last-child
[class*=" col-"] > [class^="col-"]:last-child,
[class*=" col-"]> [class*=" col-"]:last-child,
.row > [class^="col-"]:last-child,
.row > [class*=" col-"]:last-child{
padding-right: 0px;
}
This is what worked for me. I added a style inline to remove the small margin on the right. I don't really like to do inline styling, but this lone style attribute in my html makes it easy for me to remember about the hack-job spliced into my otherwise well separated code. It also eliminates the concern of my external styles loading before or after the bootstrap default stylesheet.
<div class="row" style="margin-right:0px;">
<div class="col-md-6">
<div class="col-md-6">
</div>
Apply to the body seems to get rid of the horizontal scrollbar
overflow-x: hidden;
If it still actual for someone, my solution was as follows:
.container{
overflow: hidden;
overflow-y: auto;
}
It's already fluid by default. If you want to be fluid for less width instead of col-md-6 use col-sm-6 or col-xs-6.
You can fix this problem without disturbing the bootstrap css and wait for a fix in the next version, so you can simply wrap your row by defining you own class .container-fluid with padding.
//Add this class to your global css file
<style>
.container-fluid {
padding: 0 15px;
}
</style>
//Wrap your rows in within this .container-fluid
<div class="container-fluid">
<div class="row">
<div class="col-md-3">content</div>
<div class="col-md-9">content</div>
<div class="col-md-3">content</div>
</div>
</div>
You can add a 10px padding on the sides to your body element if all it's children are rows
body {
padding: 0 10px;
}
if your HTML markup looks something like this:
<body>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</body>
The rows have a 10 px negative margin. That's what's causing the overflow. If you add 10px padding to the body, they will cancel each other out.
The only thing that assisted me was to set margin:0px on the topmost <div class="row"> in my html DOM.
This again wasn't the most appealing way to solve the issue, but as it is only in one place I put it inline.
As an fyi the container-fluid and apparent bootstrap fixes only introduced an increased whitespace on either side of the visible page... :( Although I came across my solution by reading through the back and forth on the github issue - so worthwhile reading.
Summarizing the most relevant comments in one answer:
- this is a known bug
- there are workarounds but you might not need them (read on)
- it happens when elements are placed directly inside the body, rather than inside a container-fluid div or another containing div. Placing them directly in the body is exactly what most people do when testing stuff locally. Once you place your code in the complete page (so within a container-fluid or another container div) you will not face this problem (no need to change anything).
'program story' 카테고리의 다른 글
| Spring + Web MVC : dispatcher-servlet.xml 대 applicationContext.xml (공유 보안 포함) (0) | 2020.11.08 |
|---|---|
| 모든 최근 커밋을 표시하지 않는 "svn log" (0) | 2020.11.08 |
| PHP 7의 속성에 대한 유형 힌트? (0) | 2020.11.08 |
| “누락 된 마케팅 아이콘을 해결하는 방법. (0) | 2020.11.08 |
| SQL Server 2005에 비해 SQL Server 2008의 장점은 무엇입니까? (0) | 2020.11.08 |