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

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

24
แท็บ Bootstrap Twitter: ไปที่แท็บเฉพาะบนหน้าโหลดซ้ำหรือเชื่อมโยงหลายมิติ
ฉันกำลังพัฒนาหน้าเว็บที่ฉันใช้ทวิตเตอร์ของเงินทุนของพวกเขาและกรอบBootstrap แท็บ JS มันใช้งานได้ดีมากยกเว้นปัญหาเล็ก ๆ น้อย ๆ ซึ่งหนึ่งในนั้นคือฉันไม่รู้ว่าจะไปยังแท็บเฉพาะจากลิงก์ภายนอกได้อย่างไร ตัวอย่างเช่น: <a href="facility.php#home">Home</a> <a href="facility.php#notes">Notes</a> ควรไปที่แท็บหน้าแรกและแท็บหมายเหตุตามลำดับเมื่อคลิกที่ลิงก์จากหน้าภายนอก

22
วิธีกำหนดสไตล์สีไอคอนขนาดและเงาของไอคอนตัวอักษรที่น่ากลัว
ฉันจะจัดสไตล์สีขนาดและเงาของไอคอนจากไอคอนของตัวอักษรที่น่ากลัวได้อย่างไร ตัวอย่างเช่นไซต์ของ Font Awesomeจะแสดงไอคอนบางส่วนเป็นสีขาวและบางส่วนเป็นสีแดง แต่จะไม่แสดงCSSวิธีการจัดรูปแบบให้กับพวกเขา ...

18
twitter bootstrap navbar แก้ไขเว็บไซต์ที่ทับซ้อนกันด้านบน
ฉันใช้ bootstrap บนเว็บไซต์ของฉันและฉันมีปัญหากับ navbar คงที่ เมื่อฉันใช้ navbar ปกติทุกอย่างใช้ได้ดี อย่างไรก็ตามเมื่อฉันพยายามที่จะเปลี่ยนเป็น navbar คงที่ด้านบนเนื้อหาอื่น ๆ ทั้งหมดในเว็บไซต์เลื่อนขึ้นเช่น navbar ไม่ได้อยู่ที่นั่นและ navbar ทับมัน นี่เป็นวิธีที่ฉันวางไว้: .navbar.navbar-fixed-top .navbar-inner .container .container .row //yield content ฉันพยายามที่จะคัดลอกตัวอย่าง bootstraps แต่ยังคงมีปัญหานี้เฉพาะเมื่อใช้ navbar คงที่ด้านบน ผมทำอะไรผิดหรือเปล่า?

26
เอาการขยายจากคอลัมน์ใน Bootstrap 3
ปัญหา: ลบ padding / margin ไปทางขวาและซ้ายของ col-md- * ใน Bootstrap 3 รหัส HTML: <div class="col-md-12"> <h2>OntoExplorer<span style="color:#b92429">.</span></h2> <div class="col-md-4"> <div class="widget"> <div class="widget-header"> <h3>Dimensions</h3> </div> <div class="widget-content" id=""> <div id='jqxWidget'> <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div> <div style="clear:both;" id="listBoxB"></div> </div> </div> </div> </div> <div class="col-md-8"> <div class="widget"> <div class="widget-header"> <h3>Results</h3> </div> <div class="widget-content"> …

21
Bootstrap 4 จัดตำแหน่งรายการ navbar ทางด้านขวา
ฉันจะจัดตำแหน่งรายการ navbar ให้ถูกต้องได้อย่างไร? ฉันต้องการเข้าสู่ระบบและลงทะเบียนทางด้านขวา แต่ทุกสิ่งที่ฉันลองดูเหมือนจะไม่ทำงาน นี่คือสิ่งที่ฉันได้ลองไปแล้ว: <div>รอบ ๆ<ul>ด้วยแอททริบิวต์:style="float: right" <div>รอบ ๆ<ul>ด้วยแอททริบิวต์:style="text-align: right" ลองสองสิ่งเหล่านี้บน<li>แท็ก ลองทุกสิ่งเหล่านั้นอีกครั้งโดย!importantเพิ่มไปยังจุดสิ้นสุด เปลี่ยนnav-itemเป็นnav-rightใน<li> เพิ่มpull-sm-rightคลาสให้กับ<li> เพิ่มalign-content-endคลาสให้กับ<li> นี่คือรหัสของฉัน: <div id="app" class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home …


28
Select2 ไม่ทำงานเมื่อฝังใน modal bootstrap
เมื่อฉันใช้ select2 (อินพุต) ใน bootstrap modal ฉันไม่สามารถพิมพ์อะไรลงไปได้ มันเหมือนคนพิการเหรอ? นอก modal select2 ทำงานได้ดี ตัวอย่างการทำงาน: http://jsfiddle.net/byJy8/1/ รหัส: <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Panel</h3> </div> <div class="modal-body" style="max-height: 800px"> <form class="form-horizontal"> <!-- Text input--> <div class="control-group"> <label class="control-label" …

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 พร้อมชื่อคลาสเป็นดรอปดาวน์ - เมนูย่อย

15
จัดศูนย์แนวตั้งใน Bootstrap 4
ฉันพยายามจัดกึ่งกลางคอนเทนเนอร์ของฉันที่กึ่งกลางหน้าโดยใช้ Bootstrap 4 ฉันยังไม่ประสบความสำเร็จ ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม ฉันได้สร้างมันขึ้นที่Codepen.ioเพื่อให้พวกคุณสามารถเล่นกับมันและแจ้งให้เราทราบว่าอะไรที่ทำงานได้ดีในขณะที่ฉันกำลังออกความคิด ... แสดงตัวอย่างโค้ด var currentAuthor = ""; var currentQuote = ""; function randomQuote() { $.ajax({ url: "https://api.forismatic.com/api/1.0/?", dataType: "jsonp", data: "method=getQuote&format=jsonp&lang=en&jsonp=?", success: function( response ) { $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>'); $("#quote-author").html('<p id="quote-author" …

30
การล้างส่วนท้ายไปยังด้านล่างของหน้า twitter bootstrap
โดยทั่วไปฉันคุ้นเคยกับเทคนิคการล้างส่วนท้ายด้วย CSS แต่ฉันมีปัญหาในการรับวิธีนี้ในการทำงานกับ bootstrap ของ Twitter เป็นไปได้มากที่สุดเนื่องจากการที่ bootstrap ของ Twitter นั้นตอบสนองโดยธรรมชาติ การใช้ bootstrap ของ Twitter ฉันไม่สามารถดึงส่วนท้ายเพื่อล้างข้อมูลไปที่ด้านล่างของหน้าโดยใช้วิธีการที่อธิบายไว้ในโพสต์บล็อกด้านบน

26
วิธีการตั้งค่าคลาสแอ็คทีฟ bootstrap navbar ด้วย Angular JS
หากฉันมี navbar ใน bootstrap กับรายการ Home | About | Contact ฉันจะตั้งค่าคลาสที่แอ็คทีฟสำหรับแต่ละไอเท็มเมนูได้อย่างไรเมื่อแอ็คทีฟ? นั่นคือฉันจะตั้งได้อย่างไรclass="active"เมื่อเส้นทางเชิงมุมอยู่ที่ #/ สำหรับบ้าน #/about สำหรับหน้าเกี่ยวกับ #/contact สำหรับหน้าติดต่อ


8
การซ่อนองค์ประกอบในเค้าโครงที่ตอบสนองได้หรือไม่
มองผ่าน bootstrap ดูเหมือนว่าพวกเขาสนับสนุนการยุบรายการแถบเมนูสำหรับหน้าจอขนาดเล็ก มีบางอย่างที่คล้ายกันสำหรับรายการอื่น ๆ ในหน้า? ตัวอย่างเช่นฉันมียาเม็ดคุมกำเนิดลอยไปทางขวา บนหน้าจอขนาดเล็กสิ่งนี้จะทำให้เกิดปัญหา ฉันชอบที่จะนำมาไว้ในรายการแบบเลื่อนลงแบบคลิกเพื่อแสดงเพิ่มเติมที่คล้ายกัน สิ่งนี้เป็นไปได้หรือไม่ภายในกรอบ Bootstrap ที่มีอยู่

19
แถบนำทางด้านบนปิดกั้นเนื้อหาด้านบนของหน้า
ฉันมีรหัส Bootstrap ของ Twitter นี้ <div class='navbar navbar-fixed-top'> <div class='navbar-inner'> <div class='container'> <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'> <span class='icon-bar'></span> <span class='icon-bar'></span> <span class='icon-bar'></span> </a> <div class='nav-collapse'> <ul class='nav'> <li class='active'> <a href='some_url'>My Home</a> </li> <li> <a href='some_url'>Option 1 </a> </li> <li> <a href='some_url'>Another option</a> </li> <li> <a href='some_url'>Another option</a> </li> …

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.