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

Bootstrap เป็นเฟรมเวิร์กเอนด์ที่ออกแบบมาเพื่อพัฒนาเว็บไซต์และแอพพลิเคชั่นบนเว็บ สำหรับคำถามที่เกี่ยวข้องกับเวอร์ชั่นของ Bootstrap ให้ใช้แท็กของเวอร์ชันเฉพาะจาก "twitter-bootstrap-2", "twitter-bootstrap-3" และ "bootstrap-4"

13
Bootstrap 3 และ 4 .container-fluid พร้อมกริดเพิ่มช่องว่างที่ไม่ต้องการ
ฉันต้องการให้เนื้อหาของฉันลื่นไหล แต่เมื่อใช้.container-fluidกับตารางของ Bootstrap ฉันยังคงเห็นช่องว่างภายใน ฉันจะกำจัดช่องว่างภายในได้อย่างไร? ฉันเห็นว่าฉันไม่ได้รับช่องว่าง.rowภายใน แต่ฉันต้องการเพิ่มคอลัมน์และทันทีที่ฉันทำช่องว่างภายในจะกลับมา ฉันต้องการให้สามารถใช้คอลัมน์ได้เต็มความกว้าง ตัวอย่าง: <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="col-sm-6"> <p>Use this document as a way to quickly …
18
เมนู Bootstrap Dropdown ไม่ทำงาน
ฉันมีปัญหาในการทำให้ดรอปดาวน์ทำงาน ฉันสามารถทำให้แถบนำทางปรากฏขึ้นอย่างสมบูรณ์แบบ แต่เมื่อฉันคลิกที่ "ดร็อปดาวน์" (อย่างใดอย่างหนึ่ง) มันไม่แสดงเมนูแบบเลื่อนลง ฉันได้ลองค้นหาโพสต์อื่น ๆ เกี่ยวกับเรื่องนี้ แต่ไม่มีอะไรที่ช่วยแก้ปัญหาของทุกคนได้ ฉันคัดลอกแหล่งที่มาโดยตรงจากเว็บไซต์ของ bootstrap แต่ดูเหมือนจะไม่สามารถใช้งานได้กับเครื่องของฉัน ใครมีไอเดียบ้าง ฉันจ้องมองมันเป็นเวลาหนึ่งชั่วโมงแล้วและดูเหมือนจะคิดไม่ออกว่าปัญหาคืออะไร <head> <script src="resource/js/jquery-1.11.0.js"></script> <script src="resources/js/bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function() { $('dropdown-toggle').dropdown() }); </script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" …
12
ใช้ link_to กับ HTML ที่ฝังไว้
ฉันใช้สิ่ง Bootstrap ของ Twitter และฉันมี HTML ต่อไปนี้: <a class="btn" href="<%= user_path(@user) %>"><i class="icon-ok icon-white"></i> Do it@</a> อะไรคือวิธีที่ดีที่สุดในการทำสิ่งนี้ใน Rails? ฉันอยากจะใช้<%= link_to 'Do it', user_path(@user) %>แต่<i class="icon-ok icon-white"></i>มันทำให้ฉันทิ้งไปงั้นเหรอ?
14
โหลดเนื้อหาในโมดอล (twitter bootstrap)
ฉันใช้ป๊อปอัปโมดอลของ twitter bootstrap <div id="myModal" class="modal hide fade in"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Header</h3> </div> <div class="modal-body"></div> <div class="modal-footer"> <input type="submit" class="btn btn-success" value="Save"/> </div> </div> ฉันสามารถโหลดเนื้อหาโดยใช้ ajax ด้วยองค์ประกอบนี้: <a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a> ตอนนี้ฉันต้องเปิด modal เดียวกัน แต่ใช้ url ที่แตกต่างกัน ฉันใช้โมดอลนี้เพื่อแก้ไขเอนทิตีจากฐานข้อมูลของฉัน ดังนั้นเมื่อฉันคลิกแก้ไขในเอนทิตีฉันต้องโหลดโมดอลด้วย ID <a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a> <a …
8
การปรับและขนาดภาพให้พอดีกับ div (bootstrap)
ฉันกำลังพยายามทำให้ภาพพอดีกับ div ขนาดที่กำหนด น่าเสียดายที่รูปภาพไม่เป็นไปตามสัดส่วนและแทนที่จะย่อขนาดให้เป็นขนาดที่ไม่ใหญ่พอ ฉันไม่แน่ใจว่าวิธีที่ดีที่สุดคือวิธีใดในการทำให้ภาพพอดีกับภายใน หากรหัสนี้ไม่เพียงพอฉันยินดีที่จะจัดหาเพิ่มเติมและฉันพร้อมที่จะแก้ไขข้อผิดพลาดอื่น ๆ ที่ฉันมองข้ามไป นี่คือ HTML <div class="span3 top1"> <div class="row"> <div class="span3 food1"> <img src="images/food1.jpg" alt=""> </div> </div> <div class="row"> <div class="span3 name1"> heres the name </div> </div> <div class="row"> <div class="span3 description1"> heres where i describe and say "read more" </div> </div> </div> CSS …
3
Bootstrap 3 ตัวแบ่งแนวนอน (ไม่อยู่ในดรอปดาวน์)
ฉันรู้ว่าBootstrap 3มีตัวแบ่งแนวนอนที่คุณสามารถวางไว้ในเมนูแบบเลื่อนลงเพื่อแยกลิงก์ดังนี้: <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> <li role="presentation" class="dropdown-header">Dropdown header</li> ... <li role="presentation" class="divider"></li> </ul> คำถามของฉันคือมีวิธีใดบ้างที่จะทำได้โดยไม่อยู่ในเมนูแบบเลื่อนลงเช่นใส่ลงในรายการประเภทใด ๆ หรือเมนูที่คล้ายกัน
18
วิธีตั้งค่าที่เลือกบน select โดยใช้ปลั๊กอิน selectpicker จาก bootstrap
ฉันใช้ปลั๊กอินBootstrap-Selectดังนี้: HTML : <select name="selValue" class="selectpicker"> <option value="1">Val 1</option> <option value="2">Val 2</option> <option value="3">Val 3</option> <option value="4">Val 4</option> </select> Javascript : $('select[name=selValue]').selectpicker(); ตอนนี้ฉันต้องการตั้งค่าที่เลือกเพื่อเลือกนี้เมื่อคลิกปุ่ม ... อะไรทำนองนี้: $('#mybutton').click(function(){ $('select[name=selValue]').val(1); }); แต่ไม่มีอะไรเกิดขึ้น ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร?
14
TypeError: $ (…) .modal ไม่ใช่ฟังก์ชันที่มี bootstrap Modal
ฉันมีโมดอล bootstrap 2.32 ซึ่งฉันพยายามแทรกลงใน HTML ของมุมมองอื่นแบบไดนามิก ฉันกำลังทำงานกับ Codeigniter 2.1 ต่อไปนี้การแทรกมุมมองบางส่วนของโมดอล bootstrap แบบไดนามิกลงในมุมมองฉันมี: <div id="modal_target"></div> เป็น div เป้าหมายสำหรับการแทรก ฉันมีปุ่มในมุมมองของฉันที่ดูเหมือน: <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a> JS ของฉันมี: $.ajax({ type : 'POST', url : "AjaxUpdate/get_modal", cache : false, success : function(data){ if(data){ $('#modal_target').html(data); //This shows the modal $('#form-content').modal(); } } }); …
6
popper.js ใน bootstrap 4 ให้การส่งออกโทเค็นที่ไม่คาดคิดของ SyntaxError
ฉันลองติดตั้ง bootstrap 4 และรวมลิงค์ต่อไปนี้ <script src="libs/jquery/dist/jquery.min.js"></script> <script src="libs/tether/dist/js/tether.min.js" ></script> <script src="libs/popper.js/dist/popper.js"></script> <script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script> แต่เกิดข้อผิดพลาดต่อไปนี้: Uncaught syntaxError: การส่งออกโทเค็นที่ไม่คาดคิด มีความคิดอย่างไรในการแก้ไข
1
เหตุใด Bootstrap 3 จึงเปลี่ยนไปใช้ box-sizing: border-box
ฉันกำลังย้ายธีม Bootstrap ของฉันจาก v2.3.2 เป็น v3.0.0 และสิ่งหนึ่งที่ฉันสังเกตเห็นคือมิติข้อมูลจำนวนมากถูกคำนวณแตกต่างกันเนื่องจากสไตล์ต่อไปนี้ใน bootstrap.css *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ใครช่วยอธิบายได้ไหมว่าทำไม Bootstrap ถึงเปลี่ยนขนาดกล่องขององค์ประกอบทั้งหมดเป็น border-box ฉันสงสัยว่ามันเกี่ยวข้องกับระบบกริดใหม่ที่เป็นเปอร์เซ็นต์ แต่ตัวเลือกด้านบนไม่ได้ใช้กับองค์ประกอบกริดเท่านั้น ดูเหมือน imho ที่รุนแรงไปหน่อย :-) ใครสนใจให้ข้อมูลเชิงลึกบ้าง?
12
ฉันจะตั้งค่าออฟเซ็ตสำหรับ ScrollSpy ใน Bootstrap ได้อย่างไร
ฉันมีไซต์ที่มีแถบนำทางอยู่ด้านบนและ 3 div ด้านล่างในพื้นที่เนื้อหาหลัก ฉันพยายามใช้ scrollspy จาก bootstrap framework ฉันประสบความสำเร็จในการไฮไลต์ส่วนหัวต่างๆในเมนูเมื่อคุณเลื่อนผ่าน div ฉันก็มีเช่นกันเมื่อคุณคลิกเมนูมันจะเลื่อนไปยังส่วนที่ถูกต้องของหน้า อย่างไรก็ตามออฟเซ็ตไม่ถูกต้อง (ไม่ได้คำนึงถึงแถบนำทางดังนั้นฉันต้องชดเชยประมาณ 40 พิกเซล) ฉันเห็นในหน้า Bootstrapระบุถึงตัวเลือกออฟเซ็ต แต่ฉันไม่แน่ใจว่าจะใช้อย่างไร ฉันก็ไม่ได้หมายความเช่นกันเมื่อมันบอกว่าคุณสามารถใช้ scrollspy ด้วย$('#navbar').scrollspy()ฉันไม่แน่ใจว่าจะรวมไว้ที่ไหนดังนั้นฉันจึงไม่ได้ทำและดูเหมือนว่าทุกอย่างจะใช้งานได้ (ยกเว้นออฟเซ็ต) ฉันคิดว่าการชดเชยอาจเป็นdata-offset='10'แท็กบนร่างกาย แต่มันไม่ได้ทำอะไรให้ฉัน ฉันรู้สึกว่านี่เป็นสิ่งที่ชัดเจนจริงๆและฉันแค่คิดถึงมัน ความช่วยเหลือใด ๆ รหัสของฉันคือ ... <!-- note: the data-offset doesn't do anything for me --> <body data-spy="scroll" data-offset="20"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> …
8
วิธีสร้างภาพที่ตอบสนองที่ปรับขนาดใน Bootstrap 3
ฉันกำลังใช้ twitter bootstrap 3 และฉันกำลังประสบปัญหาในการสร้างภาพที่ตอบสนอง ฉันได้ใช้img-responsiveคลาส แต่ขนาดภาพไม่ได้สเกลขึ้น ถ้าฉันใช้width:100%แทนmax-width:100%มันก็ทำงานได้อย่างสมบูรณ์ ปัญหาอยู่ที่ไหน นี่คือรหัสของฉัน: <div class="col-md-4 col-sm-4 col-xs-12 "> <div class="product"> <div class="product-img "> <img class="img-responsive" src="img/show1.png" alt="" /> </div> </div> </div>
18
Bootstrap datepicker ซ่อนอยู่หลังการเลือก
ฉันจะซ่อนปฏิทินหลังจากเลือกวันที่ได้อย่างไร มีฟังก์ชันเฉพาะที่ฉันสามารถใช้ได้หรือไม่? รหัสของฉันด้านล่าง: $('#dp1').datepicker({ format: 'mm-dd-yyyy', startDate: '-15d', autoclose: true, endDate: '+0d' // there's no convenient "right now" notation yet }); ความช่วยเหลือใด ๆ จะได้รับการชื่นชม
3
"icon-bar" ในแถบนำทาง bootstrap ของ twitter
ฉันไม่เข้าใจว่ารหัสต่อไปนี้หมายถึงอะไรicon-bar: <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> มีicon-barไว้เพื่ออะไร? เหตุใดจึงมีสามกรณีที่คล้ายกัน รหัสนี้อยู่ในส่วนแถบนำทาง: <div class="navbar-header"> ... </div>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.