Bootstrap: bagaimana cara mengubah lebar container?

127

Saya telah menggunakan Twitter Bootstrap untuk mengembangkan situs web dengan kelas wadah tetap, tetapi sekarang klien ingin situs web memiliki lebar 1000px dan bukan 1170px. Saya tidak menggunakan file .less.

Apakah ada cara cepat untuk memperbaikinya?

twitter-bootstrap

— alex
sumber

Lihat jawabannya di sini , saya pikir masalah Anda akan diselesaikan dengan biola Fixed-only dalam jawaban itu.

— Prem

@prem, tx tetapi saya tidak mendapatkan contoh karena tidak menggunakan salah satu kelas bootstrap seperti span atau container. Yang saya pikir saya perlukan untuk proyek ini adalah menyetel maksimal container ke 940px dengan bootstrap responsif.

— alex

76

Buka bagian Kustomisasi di situs Bootstrap dan pilih ukuran yang Anda inginkan. Anda harus mengatur @gridColumnWidthdan @gridGutterWidthvariabel.

Misalnya: @gridColumnWidth = 65pxdan @gridGutterWidth = 20pxhasil pada 1000pxtata letak.

Kemudian unduh.

— albertedevigo
sumber

seseorang tidak dapat mencapai kontainer 1000px yang tepat dengan mengubah variabel gridColumnWidth dan gridGutterWidth ... karena (12 * (gridColumnWidth) + 12 (gridGutterWidth)) tidak sama dengan 1000. Dan hanya saya yang memberikan solusi itu. Apakah itu benar?

— prem

15

Secara teoritis, ada kombinasi tak terbatas yang cocok dengan 1000px. Contoh: 12 * 65 + 11 * 20 = 1000 (hanya ada 11 talang antar kolom).

— albertedevigo

Hah! Saya benar-benar tidak mengenali hal yang sederhana ... lagian Anda adalah solusi yang tepat.

— prem

Terima kasih atas posting Anda, itu sangat membantu;) Sekadar catatan: Secara praktis akan ada tepat 7 solusi yang menggunakan piksel penuh untuk lebar 1000px. (lebar kolom 10, 21, 32, 43, 54, 65 dan 76)

— dfherr

@dfherr Saya tidak tahu persis apa yang Anda maksud ketika Anda mengatakan "secara praktis", tetapi harap diingat bahwa CSS mendukung nilai desimal untuk piksel. Oleh karena itu, ada solusi yang tidak terbatas. w3.org/TR/CSS21/syndata.html#length-units

— albertedevigo

232

Inilah solusinya:

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

Keuntungan melakukan ini, dibandingkan menyesuaikan Bootstrap seperti dalam jawaban @ Bastardo , adalah tidak mengubah file Bootstrap. Misalnya, jika menggunakan CDN, Anda masih dapat mengunduh sebagian besar Bootstrap dari CDN.

— mcbjam.dll
sumber

10

Sebagian besar jawaban mengabaikan CDN. Jawaban Anda adalah solusi yang tepat.

— Charles Watson

2

Ini sempurna untuk orang yang menggunakan CDN. Memodifikasi LESS (ketika 4 tiba, SASS) pada waktu pembuatan sangat cocok untuk orang yang menghosting CSS Bootstrap mereka sendiri. Namun, memodifikasi LESS khusus (atau SASS) yang diimpor setelah yang disediakan berarti Anda dapat memutakhirkan LESS yang mendasarinya tanpa (biasanya) melakukan perbedaan.

— Greg Pettit

2

Saya tahu ini benar-benar terlambat, tetapi kontainer yang diberikan cenderung lebih besar sekarang jika Anda menambahkan lebar: otomatis ke kode di atas Anda dapat membuat kontainer lebih besar dari maks 1170 mereka.

— Rick Calder

Itu yang saya cari. Terima kasih.

— tedebus

20

Anda mengikat salah satu di belakang Anda yang mengatakan bahwa Anda tidak akan menggunakan file LESS. Saya membuat tema Bootstrap Twitter pertama saya menggunakan 2.0, dan saya melakukan semuanya di CSS - membuat file override.css. Perlu waktu berhari-hari untuk membuat semuanya bekerja dengan benar.

Sekarang kami memiliki 3.0. Izinkan saya meyakinkan Anda bahwa dibutuhkan lebih sedikit waktu untuk belajar LEBIH KURANG, yang cukup mudah jika Anda merasa nyaman dengan CSS, daripada melakukan semua penggantian CSS yang gila itu. Membuat perubahan seperti yang Anda inginkan sangatlah mudah.

Di Bootstrap 3.0, kelas penampung mengontrol lebar, dan semua gaya yang tertampung menyesuaikan untuk mengisi penampung. Variabel lebar penampung ada di bagian bawah file variable.less.

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

Beberapa situs tidak memiliki cukup konten untuk mengisi tampilan 1020 atau Anda menginginkan bingkai yang lebih sempit karena alasan estetika. Karena BS menggunakan grid 12 kolom, saya menggunakan kelipatan seperti 960.

— Bastardo Sucio
sumber

4

Bekerja, tetapi: nama variabel adalah @container-sm, @container-mddan @container-lg(sekarang)

— Andreas Dolk

1

@Bastardo nama bagus +1

— Ömer An

18

@mcbjam sudah memberikan jawaban ini tapi berikut sedikit penjelasannya.

Anda dapat dengan mudah membuat perubahan menggunakan kueri media di file CSS Anda tanpa mengunduh BS. Saya baru saja melakukan ini dan bekerja dengan baik.

Nilai "min-width" kueri media akan memberi tahu CSS untuk mengubah lebar penampung Anda menjadi 1000px hanya pada layar yang lebih besar dari 1200px (atau berapa pun lebar yang Anda pilih untuk disertakan di sana). Ini menjaga daya tanggap situs Anda, jadi saat ukuran layar melonjak di bawah nilai tersebut (monitor yang lebih kecil, tablet, ponsel cerdas, dll.), Situs Anda akan tetap menyesuaikan agar sesuai dengan layar yang lebih kecil.

@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }
}

— Jeff Schwarting
sumber

13

Untuk bootstrap 4 jika Anda menggunakan Sass, berikut adalah variabel yang akan diedit

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Untuk mengganti variabel ini saya mendeklarasikan $ container-max-widths tanpa! Default di file .sass saya sebelum mengimpor bootstrap.

Catatan: Saya hanya perlu mengubah nilai xl jadi saya tidak peduli untuk memikirkan breakpoint.

— Kaizoku Gambare
sumber

12

Setel kelas wadah konten Anda sendiri dengan properti lebar 1000px dan kemudian gunakan kelas boostrap cairan-wadah sebagai ganti wadah.

Berfungsi tetapi mungkin bukan solusi terbaik.

— Geo
sumber

6

Gunakan pemilih pembungkus dan buat penampung yang memiliki lebar 100% di dalam pembungkus itu untuk merangkum seluruh halaman.

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

Sekarang lebar maksimum diatur ke 1000px dan Anda tidak perlu kurang atau sass.

— Larry Judd
sumber

0

Ukuran wadah

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

di bagian Ukuran penampung, ubah 1140ke970

Saya harap ini membantu Anda.

terima kasih atas jawaban anda tautan untuk menyesuaikan bootstrap: https://getbootstrap.com/docs/3.4/customize/

— Jadi Santo
sumber

-3

Tambahkan potongan CSS ini dalam gaya css Anda. Lebih baik menambahkan ini setelah file css bootstrap ditambahkan untuk menimpa file yang sama.

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`

— Mahendra
sumber