100% mẫu Twitter Bootstrap 3 chiều rộng

134

Tôi là một người mới sử dụng bootstrap và tôi có một mẫu rộng 100% mà tôi muốn mã bằng bootstrap. Cột đầu tiên bắt đầu ở góc bên trái và tôi có một bản đồ Google trải dài đến bên phải. Tôi nghĩ rằng tôi có thể làm điều này với container-fluidlớp học, nhưng điều đó dường như không còn nữa. Tôi không biết làm thế nào để đạt được bố cục đó với bootstrap 3. Tôi đang sử dụng mẫu Geometry PSD từ themeforest, liên kết ở đây nếu bạn muốn xem bố cục: http://themeforest.net/item/geometry-design-for- định vị địa lý-mạng xã hộir / 4752268

— Samia Ruponti
nguồn

5

Bạn có thể tùy chỉnh Bootstrap để sử dụng @container-*chiều rộng là 100%. Ngoài ra, .container-fluidsẽ trở lại trong 3.1.0. :)

247

Đối với Bootstrap 3, bạn sẽ cần sử dụng trình bao bọc tùy chỉnh và đặt chiều rộng của nó thành 100%.

.container-full {
  margin: 0 auto;
  width: 100%;
}

Dưới đây là một ví dụ hoạt động trên Bootply

Nếu bạn không muốn thêm một lớp tùy chỉnh, bạn có thể đạt được bố cục rất rộng (không phải 100%) bằng cách gói mọi thứ bên trong col-lg-12( bản demo bố cục rộng )

Cập nhật cho Bootstrap 3.1

Các container-fluidlớp học đã trở lại trong Bootstrap 3.1, vì vậy điều này có thể được sử dụng để tạo ra một bố trí đầy đủ chiều rộng (không CSS bổ sung cần thiết) ..

Bản demo Bootstrap 3.1

— Zim
nguồn

13

Bạn cần cẩn thận. Hàng có lề -15px trái và phải. Điều đó được bù bởi container có phần đệm 15px. Cách tốt nhất là thêm phần đệm đó vào thùng chứa đầy của bạn và sau đó sử dụng các hàng và cols để tạo lưới của bạn.

— rootman

6

@rootman Tôi đang sử dụng class = "container container-full" và điều đó dường như đang hoạt động.

— Kenmore

Sử dụng chất lỏng chứa cùng với col-md-12 để có được một hàng có kích thước đầy đủ. Sẽ có một máng xối (15px tiêu chuẩn ở mỗi bên) cần được loại bỏ. Cách dễ nhất là xóa nó bằng tay, bằng cách sử dụng css tùy chỉnh sau: #SomeId div {padding-left: 0; đệm-phải: 0; }

— Martin

2

Cảm ơn vì mẹo ... chất lỏng chứa hoạt động tốt với tôi, không cần thay đổi nào khác. Máng xối không có vấn đề gì vì việc đặt màu nền của lớp được chứa sẽ hiển thị màu cho các cạnh, như mong muốn, trong khi văn bản và các yếu tố khác được bù nhẹ, cũng như mong muốn.

— Krishna Gupta

30

Đây là cấu trúc cơ bản hoàn chỉnh cho bố cục 100% chiều rộng trong Bootstrap v3.0.0 . Bạn không nên bao bọc bạn <div class="row">với containerlớp học. containerLớp nguyên nhân sẽ có nhiều lề và điều này sẽ không cung cấp cho bạn bố cục toàn màn hình (100% chiều rộng) trong đó bootstrap đã loại bỏ lớp chất lỏng container khỏi phiên bản đầu tiên trên thiết bị di động v3.0.0 của chúng.

Vì vậy, chỉ cần bắt đầu viết <div class="row">mà không có lớp container và bạn đã sẵn sàng để đi với bố cục 100% chiều rộng.

<!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>

Để xem kết quả của chính tôi, tôi đã tạo ra một bootply. Xem đầu ra trực tiếp ở đó. http://bootply.com/82136 Và bootstrap cơ bản hoàn chỉnh 3 Bố cục 100% chiều rộng tôi đã tạo ra một ý chính. bạn có thể sử dụng nó Lấy ý chính từ đây

Trả lời tôi nếu bạn cần thêm trợ giúp. Cảm ơn.

— Shaharia Azam
nguồn

20

Giải pháp này thêm một thanh cuộn ngang trong FF vì lề trên .row. Các tài liệu bootstrap nói rằng .row luôn phải được sử dụng bên trong một thùng chứa vì điều này - Mọi người đang tìm cách tạo bố cục đầy đủ chất lỏng (có nghĩa là trang web của bạn trải dài toàn bộ chiều rộng của khung nhìn) phải bọc nội dung lưới của họ trong một phần tử có chứa phần đệm: 0 15px; để bù lề: 0 -15px; được sử dụng trên .bow. - getbootstrap.com/css/#grid-intro

— nealio82

5

Nealio là chính xác. Bạn vẫn nên sử dụng một container. Tôi gói các hàng có chiều rộng đầy đủ của mình trong một .container đầy đủ với khai báo CSS này:.container-full { padding: 0 15px; }

— tbeseda

3

Điều này dường như là một lỗi trong bootstrap. Tôi đã giải quyết nó bằng cách thêm phần sau vào phần tử container nơi các hàng toàn màn hình của bạn được đặt: padding: 0 15px; lề trái: 0px; lề phải: 0px;

— Jorre 7/12/13

2

Không .rowcần phải chứa tất cả trong một .container?

— skube

2

Erik Hoa đã viết một bài viết tuyệt vời về mối quan hệ container / hàng, tôi khuyên bạn nên đọc nó!

— idleberg

27

Sử dụng Bootstrap 3.3.5 và .container-fluid, đây là cách tôi có được chiều rộng đầy đủ mà không có máng xối hoặc cuộn ngang trên thiết bị di động. Lưu ý rằng.container-fluid đã được giới thiệu lại trong 3.1.

Chiều rộng đầy đủ trên thiết bị di động / máy tính bảng, màn hình 1/4 trên máy tính để bàn

<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>

Toàn bộ chiều rộng trên tất cả các độ phân giải (di động, bảng, máy tính để bàn)

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>

— angensesen
nguồn

20

Bạn đang sử dụng đúng div.container-fluidvà bạn cũng cần một div.rowđứa trẻ. Sau đó, nội dung phải được đặt bên trong mà không có bất kỳ cột lưới. Nếu bạn có một cái nhìn vào các tài liệu bạn có thể tìm thấy văn bản này:

Các hàng phải được đặt trong một .container (chiều rộng cố định) hoặc .container-liquid (full-width) để căn chỉnh và đệm phù hợp.

Sử dụng các hàng để tạo các nhóm cột ngang.

Không sử dụng cột lưới, nó ổn như đã nêu ở đây:

Nội dung phải được đặt trong các cột và chỉ các cột có thể là con ngay lập tức của các hàng.

Và nhìn vào ví dụ này , bạn có thể đọc văn bản này:

Toàn bộ chiều rộng, cột đơn : Không cần các lớp lưới cho các phần tử toàn chiều rộng.

Đây là một ví dụ trực tiếp cho thấy một số yếu tố sử dụng bố cục chính xác. Bằng cách này, bạn không cần bất kỳ CSS hoặc hack tùy chỉnh.

— hoa hồng
nguồn

5

Trong BOOTSTRAP 4 bạn có thể sử dụng

<div class="row m-0">
my fullwidth div
</div>

... Nếu bạn chỉ sử dụng .row mà không có .m-0 làm div cấp cao nhất, bạn sẽ có lề không mong muốn, điều này làm cho trang rộng hơn cửa sổ trình duyệt và gây ra thanh cuộn ngang.

— Felix
nguồn