คำถามติดแท็ก twitter-bootstrap-3

Bootstrap 3 เป็นเฟรมเวิร์กส่วนหน้ารุ่นที่สามที่ช่วยให้การพัฒนาเว็บเร็วขึ้นด้วยรูปลักษณ์ที่น่าดึงดูด ใช้กับแท็ก [twitter-bootstrap]

30
จัดคอลัมน์ให้อยู่กึ่งกลางโดยใช้ Twitter Bootstrap 3
ฉันจะกำหนดขนาดของคอลัมน์หนึ่งคอลัมน์ไว้ในคอนเทนเนอร์ (12 คอลัมน์) ในTwitter Bootstrap 3 ได้อย่างไร .centered { background-color: red; } <body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันต้องการ a divโดยมีคลาส.centeredให้อยู่กึ่งกลางภายในคอนเทนเนอร์ ฉันอาจใช้แถวถ้ามีหลายdivs แต่ตอนนี้ฉันต้องการ a ที่divมีขนาดหนึ่งคอลัมน์ที่อยู่กึ่งกลางภายในคอนเทนเนอร์ (12 คอลัมน์) ฉันยังไม่แน่ใจว่าวิธีการข้างต้นดีพอเนื่องจากความตั้งใจที่จะไม่ชดเชยdivครึ่ง ฉันไม่ต้องการพื้นที่ว่างด้านนอกdivและเนื้อหาของdivสัดส่วนที่ลดลง ฉันต้องการพื้นที่ว่างด้านนอก div เพื่อกระจายอย่างเท่าเทียมกัน (ลดขนาดจนถึงความกว้างคอนเทนเนอร์เท่ากับหนึ่งคอลัมน์)
23
จัดแนวตั้งด้วย Bootstrap 3
ฉันใช้ Twitter Bootstrap 3 และฉันมีปัญหาเมื่อฉันต้องการจัดตำแหน่งแนวตั้งสองdivตัวอย่าง - ลิงค์ JSFiddle : <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> …
6
sr-only ใน Bootstrap 3 คืออะไร
คลาสนี้sr-onlyใช้ทำอะไร? มีความสำคัญหรือฉันสามารถลบออกได้หรือไม่ ทำงานได้ดีโดยไม่ต้อง นี่คือตัวอย่างของฉัน: <div class="btn-group"> <button type="button" class="btn btn-info btn-md">Departments</button> <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sales</a></li> <li><a href="#">Technical</a></li> <li class="divider"></li> <li><a href="#">Show all</a></li> </ul> </div>
8
คอนเทนเนอร์ของเหลวเทียบกับ. ภาชนะบรรจุ
เพิ่งดาวน์โหลด 3.1 และพบในเอกสาร ... เปิดรูปแบบตารางใด ๆ ความกว้างคงเป็นรูปแบบเต็มความกว้างโดยการเปลี่ยนนอกสุดของคุณจะ.container.container-fluid มองในbootstrap.cssก็ปรากฏว่าเป็นเหมือน.container-fluid .containerทั้งคู่มี CSS เหมือนกันและทุกอินสแตนซ์ของ.container-fluidจะถูกจับคู่กับ.containerและคลาสคอลัมน์ทั้งหมดจะถูกระบุเป็นเปอร์เซ็นต์ เมื่อ twiddling ด้วยตัวอย่างฉันไม่เห็นความแตกต่างใด ๆ ขณะที่ฉันยังใหม่กับ Bootstrap ฉันคิดว่าฉันขาดอะไรไป ใครซักคนใช้เวลาสักครู่และสอนฉัน
17
ฉันจะทำให้ปุ่ม Twitter Bootstrap จัดเรียงถูกต้องได้อย่างไร
ฉันมีตัวอย่างง่ายๆที่นี่: http://jsfiddle.net/HdeZ3/1/ <ul> <li>One <input class="btn pull-right" value="test"></li> <li>Two <input class="btn pull-right" value="test2"></li> </ul> ฉันมีรายการที่ไม่ได้เรียงลำดับและสำหรับรายการแต่ละรายการฉันต้องการให้ข้อความทางด้านซ้ายแล้วปุ่มจัดตำแหน่งทางขวา ฉันพยายามใช้ pull-right แต่มันทำให้การจัดแนวนั้นยุ่งเหยิงไปหมด ผมทำอะไรผิดหรือเปล่า?
8
ไฟล์. map ที่ใช้ใน Bootstrap 3.x คืออะไร?
มีไฟล์สองไฟล์ที่รวมอยู่ในCSSโฟลเดอร์ที่มีนามสกุลไฟล์. map พวกเขาคือ: bootstrap-theme.css.map bootstrap.css.map ดูเหมือนว่าจะเป็นไฟล์เล็ก แต่ฉันไม่รู้ว่ามันมีไว้เพื่ออะไร
5
ความหมายของตัวเลขใน“ col-md-4”,“ col-xs-1”,“ col-lg-2” ใน Bootstrap
ฉันสับสนกับระบบกริดใน Bootstrap ใหม่โดยเฉพาะคลาสเหล่านี้: col-lg-* col-md-* col-xs-* (โดยที่ * หมายถึงบางหมายเลข) ทุกคนสามารถอธิบายได้ดังต่อไปนี้: อย่างไรตัวเลขที่อยู่ในการจัดตำแหน่งกริด? อย่างไรใช้ตัวเลขเหล่านี้ สิ่งที่พวกเขาเป็นตัวแทนจริง ๆ ?
29
Bootstrap 3 Navbar พร้อมโลโก้
ฉันต้องการใช้ Navbar เริ่มต้น Bootstrap 3 พร้อมโลโก้รูปภาพแทนการสร้างแบรนด์ข้อความ วิธีที่เหมาะสมในการทำเช่นนี้คืออะไรโดยไม่ทำให้เกิดปัญหากับขนาดหน้าจอที่แตกต่างกัน ฉันถือว่านี่เป็นข้อกำหนดทั่วไป แต่ฉันยังไม่เห็นตัวอย่างโค้ดที่ดี ข้อกำหนดสำคัญอื่น ๆ นอกเหนือจากการแสดงผลที่ยอมรับได้ในทุกขนาดหน้าจอคือการยุบเมนูบนหน้าจอขนาดเล็ก ฉันพยายามใส่แท็ก IMG ไว้ในแท็ก A ที่มีระดับแบรนด์ navbar แต่นั่นทำให้เมนูไม่สามารถทำงานได้อย่างถูกต้องบนโทรศัพท์ Android ของฉัน ฉันยังพยายามเพิ่มความสูงของคลาส navbar แต่นั่นทำให้สิ่งต่าง ๆ แย่ลงไปอีก อย่างไรก็ตามรูปโลโก้ของฉันมีขนาดใหญ่กว่าความสูงของแถบนำทาง
30
ห้าคอลัมน์ที่เท่ากันใน bootstrap Twitter
ฉันต้องการมี 5 คอลัมน์เท่ากันในหน้าฉันกำลังสร้างและฉันไม่สามารถเข้าใจได้ว่ามีการใช้กริด 5 คอลัมน์ที่นี่ได้อย่างไร: http://web.archive.org/web/20120416024539/http://domain7 เครื่องมือ .com / / มือถือ / บูต / ตอบสนอง ตารางห้าคอลัมน์ถูกแสดงไว้เหนือส่วนหนึ่งของเฟรมเวิร์ก bootstrap twitter หรือไม่?
30
Bootstrap 3 Glyphicons ไม่ทำงาน
ฉันดาวน์โหลด bootstrap 3.0 และไม่สามารถใช้ glyphicons ในการทำงานได้ ฉันได้รับข้อผิดพลาด "E003" บางประเภท ความคิดใด ๆ ว่าทำไมสิ่งนี้ถึงเกิดขึ้น? ฉันลองทั้งในประเทศและออนไลน์และฉันยังคงได้รับปัญหาเดียวกัน
19
ทำปฏิกิริยา Js โดยใช้คุณสมบัติคลาสอย่างมีเงื่อนไข
ฉันต้องการแสดงและซ่อนกลุ่มปุ่มตามเงื่อนไขโดยขึ้นอยู่กับสิ่งที่ส่งผ่านจากองค์ประกอบหลักซึ่งมีลักษณะดังนี้: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span …
10
วิธีการจัดกึ่งกลางคอนเทนเนอร์ในแนวตั้งใน Bootstrap
ฉันกำลังมองหาวิธีที่จะจัดศูนย์กลางcontainerdiv ไว้ในแนวตั้งภายในjumbotronและตั้งให้อยู่ตรงกลางของหน้า .jumbotronจะต้องมีการปรับตัวให้เต็มความสูงและความกว้างของหน้าจอ .containerdiv มีความกว้างของ1025pxและควรจะอยู่ตรงกลางของหน้า (กลางแนวตั้ง) ฉันต้องการให้หน้านี้มี jumbotron ที่ปรับให้เหมาะกับความสูงและความกว้างของหน้าจอพร้อมกับที่เก็บกึ่งกลางแนวตั้งไปที่ jumbotron ฉันจะประสบความสำเร็จได้อย่างไร .jumbotron { height:100%; width:100%; } .container { width:1025px; } .jumbotron .container { max-width: 100%; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron"> <div class="container text-center"> <h1>The easiest and powerful way</h1> <div class="row"> <div class="col-md-7"> <div class="top-bg"></div> </div> <div class="col-md-5 iPhone-features" style="margin-left:-25px;"> …
7
Bootstrap เมนูย่อยแบบหล่นลงหายไป
Bootstrap 3 ยังอยู่ที่ RC แต่ฉันแค่พยายามใช้มัน ฉันไม่สามารถหาวิธีวางคลาสเมนูย่อยได้ แม้จะไม่มีคลาสใน CSS และแม้แต่เอกสารใหม่ก็ไม่พูดอะไรเกี่ยวกับมัน มันอยู่ที่นั่นใน 2.x พร้อมชื่อคลาสเป็นดรอปดาวน์ - เมนูย่อย
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.