부트 스트랩 초보자이며 부트 스트랩으로 코딩하려는 100 % 너비의 템플릿이 있습니다. 첫 번째 열은 왼쪽 모서리에서 시작하며 가장 오른쪽으로 뻗어있는 Google지도가 있습니다. container-fluid수업 에서이 작업을 수행 할 수 있다고 생각 했지만 더 이상 사용할 수없는 것 같습니다. : 나는 어떻게 themeforest에서, 당신은 레이아웃을보고 싶다면 여기 링크 I는 기하 PSD 템플릿을 사용하고 3. 부트 스트랩과 그 레이아웃을 달성하기 위해 아무 생각이 http://themeforest.net/item/geometry-design-for-을 지리적 위치-사회적 네트워크 / 4752268
답변:
Bootstrap 3의 경우 사용자 정의 래퍼를 사용하고 너비를 100 %로 설정해야합니다.
.container-full {
margin: 0 auto;
width: 100%;
}다음 은 Bootply에 대한 실제 예입니다.
사용자 정의 클래스를 추가하지 않으려는 경우 모든 것을 col-lg-12( 와이드 레이아웃 데모 ) 안에 배치하여 매우 넓은 레이아웃 (100 % 아님)을 달성 할 수 있습니다
부트 스트랩 3.1 업데이트
이 container-fluid클래스는 Bootstrap 3.1에서 반환되었으므로 전체 너비 레이아웃을 생성하는 데 사용할 수 있습니다 (추가 CSS 필요 없음).
이것은 Bootstrap v3.0.0의 100 % 너비 레이아웃 을 위한 완전한 기본 구조입니다 . 당신은 수업으로 당신 을 포장해서는 안됩니다 . 원인 클래스는 많은 마진을 필요로하며 부트 스트랩이 컨테이너-유동 클래스를 모바일 첫 번째 버전 v3.0.0에서 제거한 전체 화면 (100 % 너비) 레이아웃을 제공하지 않습니다 .<div class="row">containercontainer
<div class="row">컨테이너 클래스없이 작성 을 시작 하면 100 % 너비 레이아웃을 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Basic 100% width Structure</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
<script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-3 red">Test content</div>
<div class="col-md-9 green">Another Content</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>혼자서 결과를보기 위해 나는 bootply를 만들었습니다. 거기에 라이브 출력을 참조하십시오. http://bootply.com/82136 그리고 완전한 기본 부트 스트랩 3 100 % 너비 레이아웃은 요점을 만들었습니다. 당신은 그것을 사용할 수 있습니다. 의 취지를 얻기 여기를
더 많은 도움이 필요하면 답장을 보내십시오. 감사.
.container-full { padding: 0 15px; }
.row것을에 포함시킬 필요는 .container없습니까?
Bootstrap 3.3.5 및를 사용하면 .container-fluid모바일에서 거터 또는 가로 스크롤없이 전체 너비를 얻는 방법입니다. 참고 .container-fluid3.1에서 다시 도입되었다.
모바일 / 태블릿의 전체 너비, 데스크톱의 1/4 화면
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
<!-- Full-width for mobile -->
<!-- 1/4 screen width for desktop -->
</div>
</div>
</div>모든 해상도 (모바일, 테이블, 데스크탑)에서 전체 너비
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div>
<!-- Full-width content -->
</div>
</div>
</div>당신은 올바르게 사용 div.container-fluid하고 또한 div.row아이 가 필요합니다 . 그런 다음 내용은 그리드 열없이 내부에 배치해야합니다. 문서를 살펴보면 다음 텍스트를 찾을 수 있습니다.
- 올바른 정렬 및 패딩을 위해서는 행을 컨테이너 (고정 너비) 또는 컨테이너 유체 (전폭) 내에 배치 해야합니다 .
- 행을 사용하여 가로 열 그룹을 만듭니다.
그리드 열을 사용하지 않으면 다음과 같이 괜찮습니다.
- 내용 은 열 안에 배치 해야 하며 열만 행의 직계 자식 일 수 있습니다.
그리고보고 이 예 것은,이 텍스트를 읽을 수 있습니다 :
전체 너비, 단일 열 : 전체 너비 요소에 그리드 클래스가 필요하지 않습니다.
다음 은 올바른 레이아웃을 사용하는 일부 요소를 보여주는 라이브 예입니다. 이 방법으로 사용자 정의 CSS 또는 해킹이 필요하지 않습니다.
@container-*너비를 100 % 로 사용하도록 부트 스트랩을 사용자 정의 할 수 있습니다 . 또한.container-fluid3.1.0으로 돌아옵니다. :)