เทมเพลต Twitter Bootstrap 3 ความกว้าง 100%

Question 1

ฉันเป็นมือใหม่ bootstrap และฉันมีเทมเพลตกว้าง 100% ที่ฉันต้องการเขียนโค้ดด้วย bootstrap คอลัมน์แรกเริ่มต้นที่มุมซ้ายและฉันมีแผนที่ Google ซึ่งทอดยาวไปทางขวาสุด ฉันคิดว่าฉันสามารถทำสิ่งนี้กับcontainer-fluidชั้นเรียนได้ แต่ดูเหมือนจะไม่มีอีกแล้ว ฉันไม่รู้ว่าจะทำอย่างไรให้ได้เลย์เอาต์นั้นด้วย bootstrap 3 ฉันใช้เทมเพลต Geometry PSD จาก themeforest ลิงก์ที่นี่หากคุณต้องการดูเค้าโครง: http://themeforest.net/item/geometry-design-for- ตำแหน่งทางภูมิศาสตร์สังคมเครือข่าย / 4752268

Question 2

สำหรับ Bootstrap 3 คุณจะต้องใช้กระดาษห่อหุ้มที่กำหนดเองและตั้งค่าความกว้างเป็น 100%

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

นี่คือตัวอย่างการทำงานบน Bootply

หากคุณไม่ต้องการเพิ่มคลาสที่กำหนดเองคุณสามารถสร้างเลย์เอาต์ที่กว้างมาก (ไม่ใช่ 100%) โดยการรวมทุกอย่างไว้ในcol-lg-12( การสาธิตเลย์เอาต์แบบกว้าง )

อัพเดตสำหรับ Bootstrap 3.1

container-fluidระดับได้กลับมาใน Bootstrap 3.1 ดังนั้นนี้สามารถใช้ในการสร้างรูปแบบเต็มความกว้าง (ไม่จำเป็นต้องเพิ่ม CSS) ..

Bootstrap 3.1 สาธิต

Question 3

นี่คือโครงสร้างพื้นฐานที่สมบูรณ์แบบสำหรับรูปแบบความกว้าง 100%ในBootstrap v3.0.0 คุณไม่ควรห่อของคุณ<div class="row">ที่มีcontainerระดับ containerคลาสสาเหตุจะใช้ระยะขอบมากและจะไม่แสดงเค้าโครงแบบเต็มหน้าจอ (ความกว้าง 100%) ซึ่ง bootstrap ได้ลบคลาสcontainer-fluidออกจากเวอร์ชันมือถือแรก v3.0.0

ดังนั้นเพียงเริ่มเขียน<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และ bootstrap พื้นฐานที่สมบูรณ์ 3 เค้าโครงความกว้าง 100% ฉันได้สร้างส่วนสำคัญ คุณสามารถใช้ รับส่วนสำคัญจากที่นี่

ตอบกลับฉันหากคุณต้องการความช่วยเหลือเพิ่มเติม ขอบคุณ.

Question 4

ใช้Bootstrap 3.3.5 และ.container-fluidนี่คือวิธีที่ฉันได้รับความกว้างเต็มโดยไม่มีรางน้ำหรือการเลื่อนแนวนอนบนมือถือ โปรดทราบว่า.container-fluidได้รับการแนะนำใหม่ใน 3.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>

Question 5

คุณใช้ถูกdiv.container-fluidและคุณต้องมีdiv.rowลูกด้วย จากนั้นเนื้อหาจะต้องวางไว้ข้างในโดยไม่มีคอลัมน์กริด หากคุณดูเอกสารคุณจะพบข้อความนี้:

ต้องวางแถวภายใน. container (fixed-width) หรือ. container-fluid (full-width) เพื่อการจัดตำแหน่งและช่องว่างที่เหมาะสม

ใช้แถวเพื่อสร้างกลุ่มคอลัมน์แนวนอน

ไม่ใช้คอลัมน์กริดก็ใช้ได้ตามที่ระบุไว้ที่นี่:

ควรวางเนื้อหาไว้ในคอลัมน์และเฉพาะคอลัมน์เท่านั้นที่สามารถเป็นลูกของแถวได้

เมื่อดูตัวอย่างนี้คุณสามารถอ่านข้อความนี้:

ความกว้างเต็มคอลัมน์เดียว : ไม่จำเป็นต้องมีคลาสตารางสำหรับองค์ประกอบแบบเต็มความกว้าง

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

Question 6

ใน BOOTSTRAP 4 คุณสามารถใช้

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

... ถ้าคุณใช้. row โดยไม่มี. m-0 เป็น div ระดับบนสุดคุณจะมีระยะขอบที่ไม่ต้องการซึ่งทำให้หน้ากว้างกว่าหน้าต่างเบราว์เซอร์และทำให้เกิดแถบเลื่อนแนวนอน