Bootstrap: ฉันจะเปลี่ยนความกว้างของคอนเทนเนอร์ได้อย่างไร

128

ฉันใช้ Twitter Bootstrap เพื่อพัฒนาเว็บไซต์ด้วยคลาสคอนเทนเนอร์คงที่ แต่ตอนนี้ลูกค้าต้องการให้เว็บไซต์มีความกว้าง 1000px ไม่ใช่ 1170px ฉันไม่ใช้ไฟล์ .less

มีวิธีแก้ไขอย่างรวดเร็วหรือไม่?

twitter-bootstrap

— อเล็กซ์
แหล่งที่มา

อ้างถึงคำตอบที่นี่ฉันคิดว่าปัญหาของคุณจะได้รับการแก้ไขโดยซอคงเท่านั้นในคำตอบนั้น

— ฤ

@prem, tx แต่ฉันไม่ได้รับตัวอย่างเนื่องจากไม่ได้ใช้คลาส bootstrap ใด ๆ เช่น span หรือคอนเทนเนอร์ ทั้งหมดที่ฉันคิดว่าฉันต้องการสำหรับโปรเจ็กต์นี้คือการตั้งค่าสูงสุดของคอนเทนเนอร์เป็น 940px ด้วย bootstrap ที่ตอบสนอง

— alex

76

ไปที่ส่วนCustomizeบนเว็บไซต์ Bootstrap และเลือกขนาดที่คุณต้องการ คุณจะต้องตั้งค่า@gridColumnWidthและ@gridGutterWidthตัวแปร

ตัวอย่างเช่น@gridColumnWidth = 65pxและ@gridGutterWidth = 20pxผลลัพธ์ใน1000pxเค้าโครง

จากนั้นดาวน์โหลด

— albertedevigo
แหล่งที่มา

เราไม่สามารถเข้าถึงคอนเทนเนอร์ 1000px ที่แน่นอนได้โดยการเปลี่ยนตัวแปร gridColumnWidth และ gridGutterWidth ... เนื่องจาก (12 * (gridColumnWidth) + 12 (gridGutterWidth)) ไม่เท่ากับ 1,000 ดังนั้นฉันจึงให้โซลูชันนั้นเท่านั้น ถูกต้องหรือไม่

— เปรม

15

ในทางทฤษฎีมีชุดค่าผสมที่ไม่สิ้นสุดที่ตรงกับ 1,000px ตัวอย่าง: 12 * 65 + 11 * 20 = 1,000 (มีเพียง 11 รางระหว่างคอลัมน์)

— albertedevigo

ฮะ! ฉันไม่รู้จักสิ่งง่ายๆจริงๆ ... อย่างไรก็ตามของคุณคือทางออกที่ดี

— ฤ

ขอบคุณสำหรับโพสต์ของคุณมันมีประโยชน์;) หมายเหตุ: ในทางปฏิบัติจะมี 7 โซลูชันที่ใช้พิกเซลเต็มสำหรับความกว้าง 1,000px (ความกว้างคอลัมน์ 10, 21, 32, 43, 54, 65 และ 76)

— dfherr

@dfherr ฉันไม่รู้ว่าคุณหมายถึงอะไรเมื่อคุณพูดว่า "จริง" แต่โปรดทราบว่า CSS รองรับค่าทศนิยมสำหรับพิกเซล ดังนั้นจึงมีวิธีแก้ปัญหาที่ไม่สิ้นสุด w3.org/TR/CSS21/syndata.html#length-units

— albertedevigo

234

นี่คือวิธีแก้ปัญหา:

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

ข้อดีของการทำเช่นนี้เทียบกับการปรับแต่ง Bootstrap เช่นเดียวกับคำตอบของ @ Bastardoคือมันจะไม่เปลี่ยนไฟล์ Bootstrap ตัวอย่างเช่นหากใช้ CDN คุณยังสามารถดาวน์โหลด Bootstrap ส่วนใหญ่ได้จาก CDN

— mcbjam
แหล่งที่มา

10

คำตอบส่วนใหญ่ละเลย CDN คำตอบของคุณคือทางออกที่สมบูรณ์แบบ

— Charles Watson

2

เหมาะสำหรับผู้ที่ใช้ CDN การปรับเปลี่ยน LESS (เมื่อ 4 มาถึง SASS) ในเวลาสร้างเหมาะสำหรับผู้ที่โฮสต์ Bootstrap CSS ของตัวเอง อย่างไรก็ตามการปรับเปลี่ยน LESS (หรือ SASS) แบบกำหนดเองที่นำเข้าหลังจากที่ให้มาหมายความว่าคุณสามารถอัปเกรด LESS พื้นฐานได้โดยไม่ต้อง (โดยปกติ) ทำการเปลี่ยนแปลง

— Greg Pettit

2

ฉันรู้ว่านี่มันสายไปแล้ว แต่ตอนนี้คอนเทนเนอร์ที่กำหนดมักจะใหญ่ขึ้นถ้าคุณเพิ่มความกว้าง: อัตโนมัติในโค้ดด้านบนคุณสามารถสร้างคอนเทนเนอร์ให้ใหญ่กว่า 1170 สูงสุดได้

— Rick Calder

มันคือสิ่งที่ฉันกำลังมองหา ขอบคุณ.

— tedebus

20

คุณกำลังผูกคนที่อยู่ด้านหลังของคุณและบอกว่าคุณจะไม่ใช้ไฟล์ LESS ฉันสร้างธีม Twitter Bootstrap ตัวแรกโดยใช้ 2.0 และทำทุกอย่างใน CSS - สร้างไฟล์ override.css ใช้เวลาหลายวันกว่าจะทำงานได้อย่างถูกต้อง

ตอนนี้เรามี 3.0 ขอรับรองว่าใช้เวลาน้อยลงในการเรียนรู้ LESS ซึ่งค่อนข้างตรงไปตรงมาหากคุณพอใจกับ CSS มากกว่าการลบล้าง CSS ที่บ้าคลั่งเหล่านั้นทั้งหมด การเปลี่ยนแปลงอย่างที่คุณต้องการคือเค้กสักชิ้น

ใน Bootstrap 3.0 คลาสคอนเทนเนอร์จะควบคุมความกว้างและสไตล์ที่มีอยู่ทั้งหมดจะปรับให้เต็มคอนเทนเนอร์ ตัวแปรความกว้างของคอนเทนเนอร์อยู่ที่ด้านล่างของไฟล์ 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));

บางไซต์อาจมีเนื้อหาไม่เพียงพอที่จะแสดงผล 1020 หรือคุณต้องการกรอบที่แคบลงด้วยเหตุผลด้านความสวยงาม เนื่องจาก BS ใช้กริด 12 คอลัมน์ฉันจึงใช้หลาย ๆ เช่น 960

— Bastardo Sucio
แหล่งที่มา

4

ทำงาน แต่: ชื่อตัวแปร@container-sm, @container-mdและ@container-lg(ตอนนี้)

— แอนเดรี Dolk

1

@Bastardo nice name +1

— Ömer

18

@mcbjam ได้ให้คำตอบนี้แล้ว แต่นี่คือคำอธิบายเพิ่มเติมเล็กน้อย

คุณสามารถทำการเปลี่ยนแปลงได้อย่างง่ายดายโดยใช้แบบสอบถามสื่อในไฟล์ CSS ของคุณโดยไม่ต้องดาวน์โหลด BS ฉันเพิ่งทำสิ่งนี้และมันก็ทำงานได้อย่างสวยงาม

ค่า "ความกว้างต่ำสุด" ของคิวรีสื่อจะบอกให้ CSS เปลี่ยนความกว้างของคอนเทนเนอร์ของคุณเป็น 1000px เฉพาะบนหน้าจอที่มีขนาดใหญ่กว่า 1200px (หรือความกว้างใดก็ตามที่คุณเลือกรวมไว้ที่นั่น) วิธีนี้จะรักษาการตอบสนองของไซต์ของคุณดังนั้นเมื่อขนาดหน้าจอกระโดดลงไปต่ำกว่าค่าดังกล่าว (จอภาพขนาดเล็กแท็บเล็ตสมาร์ทโฟน ฯลฯ ) ไซต์ของคุณจะยังคงปรับให้พอดีกับหน้าจอที่เล็กลง

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

— Jeff Schwarting
แหล่งที่มา

13

สำหรับ bootstrap 4 ถ้าคุณใช้ Sass นี่คือตัวแปรที่จะแก้ไข

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

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

ในการแทนที่ตัวแปรนี้ฉันได้ประกาศ $ container-max-widths โดยไม่มี! default ในไฟล์ .ass ของฉันก่อนที่จะนำเข้า bootstrap

หมายเหตุ: ฉันต้องการเปลี่ยนค่า xl เท่านั้นดังนั้นฉันจึงไม่สนใจที่จะคิดถึงเบรกพอยต์

— ไคโซกุกัมบาเระ
แหล่งที่มา

12

ตั้งค่าคลาสคอนเทนเนอร์เนื้อหาของคุณเองด้วยคุณสมบัติความกว้าง 1000px จากนั้นใช้คลาสบูสต์แร็พของของไหลแทนคอนเทนเนอร์

ใช้ได้ผล แต่อาจไม่ใช่ทางออกที่ดีที่สุด

— ภูมิศาสตร์
แหล่งที่มา

6

ใช้ตัวเลือกกระดาษห่อและสร้างคอนเทนเนอร์ที่มีความกว้าง 100% ภายในกระดาษห่อนั้นเพื่อห่อหุ้มทั้งหน้า

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

ตอนนี้ความกว้างสูงสุดถูกกำหนดไว้ที่ 1000px และคุณไม่จำเป็นต้องมีน้อยกว่าหรือ sass

— แลร์รี่จัดด์
แหล่งที่มา

0

ขนาดตู้คอนเทนเนอร์

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

ในส่วนขนาดคอนเทนเนอร์เปลี่ยน1140เป็น970

ฉันหวังว่ามันจะช่วยคุณได้

ขอบคุณสำหรับความถูกต้อง ลิงค์สำหรับปรับแต่ง bootstrap: https://getbootstrap.com/docs/3.4/customize/

— ซานโต้
แหล่งที่มา

-3

เพิ่มส่วนของ CSS เหล่านี้ในสไตล์ css ของคุณ จะดีกว่าที่จะเพิ่มสิ่งนี้หลังจากเพิ่มไฟล์ bootstrap css เพื่อที่จะเขียนทับไฟล์เดียวกัน

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

— Mahendra
แหล่งที่มา