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

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

10
Bootstrap 3 แผงส่วนหัวที่มีปุ่มผิดตำแหน่ง
ฉันใช้ Bootstrap 3 และฉันต้องการเพิ่มปุ่มบางปุ่มในส่วนหัวของแผงที่มุมขวาบน เมื่อพยายามเพิ่มพวกเขาจะแสดงอยู่ด้านล่างของชื่อเรื่องพื้นฐาน รหัส: http://bootply.com/82631 CSS ที่หายไปคืออะไรที่ฉันควรเพิ่มในชื่อหัวข้อแผงหรือปุ่ม

6
Bootstrap 3 - ทำไมคลาสแถวจึงกว้างกว่าคอนเทนเนอร์?
ฉันเพิ่งเริ่มใช้ Bootstrap 3 ฉันมีช่วงเวลาที่ยากลำบากในการทำความเข้าใจว่าคลาสแถวทำงานอย่างไร มีวิธีหลีกเลี่ยงpadding-leftและpadding-right? <div class="row" style="background:#000000"> <div class="col-xs-4 .col-xs-offset-1"> col </div> <div class="col-xs-2"> col </div> <div class="col-xs-2"> col </div> <div class="col-xs-2"> col </div> </div> http://jsfiddle.net/petran/rdRpx/

16
วิธีตั้งค่าโฟกัสเป็นอินพุตข้อความแรกในโมดอล bootstrap หลังจากที่แสดง
ฉันโหลดโมดอล bootstrap แบบไดนามิกและมีอินพุตข้อความน้อย ปัญหาที่ฉันพบว่าต้องการให้เคอร์เซอร์โฟกัสที่อินพุตแรกในโมดอลนี้และสิ่งนี้จะไม่เกิดขึ้นตามค่าเริ่มต้น ดังนั้นฉันจึงเขียนโค้ดนี้เพื่อทำ: $('#modalContainer').on('show', function () { $('input:text:visible:first').focus(); }); แต่ตอนนี้โฟกัสที่อินพุทสักครู่แล้วหายไปโดยอัตโนมัติเหตุใดจึงเกิดขึ้นและจะแก้อย่างไร

10
การจัดข้อความไว้ตรงกลางตารางใน Twitter Bootstrap
ด้วยเหตุผลบางประการข้อความภายในตารางยังคงไม่อยู่กึ่งกลาง ทำไม? ฉันจะจัดข้อความให้อยู่กึ่งกลางในตารางได้อย่างไร เพื่อให้ชัดเจนจริงๆ: ตัวอย่างเช่นฉันต้องการให้ "ลอเรม" นั่งตรงกลางของ "1" ทั้งสี่ @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); table, thead, tr, tbody, th, td { text-align: center; } <table class="table"> <thead> <tr> <th>1</th> <th>1</th> <th>1</th> <th>1</th> <th>2</th> <th>2</th> <th>2</th> <th>2</th> <th>3</th> <th>3</th> <th>3</th> <th>3</th> </tr> </thead> <tbody> <tr> <td colspan="4">Lorem</td> <td colspan="4">ipsum</td> <td colspan="4">dolor</td> </tr> </tbody> </table> …

21
คำแนะนำเครื่องมือของ Bootstrap ไม่หายไปหลังจากคลิกปุ่มและวางเมาส์
ฉันมีปัญหากับคำแนะนำเครื่องมือของ bootstrap: เมื่อฉันคลิกที่ปุ่มคำแนะนำเครื่องมือจะยังคงอยู่แม้ว่าเคอร์เซอร์จะอยู่นอกปุ่มก็ตาม ฉันได้ดูคู่มือ - เคล็ดลับเครื่องมือของ Bootstrapแล้วและหากฉันคลิกที่ปุ่มต่างๆฉันพบปัญหาเดียวกัน มีวิธีแก้ไขปัญหานี้หรือไม่? เพิ่งลองใน FF, IE ล่าสุด

6
twitter bootstrap การเติมข้อความอัตโนมัติแบบเลื่อนลง / combobox ด้วย Knockoutjs
ฉันมีข้อกำหนดที่ฉันต้องใช้ดรอปดาวน์การเติมข้อความอัตโนมัติสำหรับบูตสแตรป แต่ผู้ใช้สามารถมีข้อความในรูปแบบอิสระในเมนูแบบเลื่อนลงนั้นได้หากต้องการ ก่อนที่คุณจะคิดถึง TypeAhead ฉันสามารถใช้กล่องข้อความ Bootstrap TypeAhead ได้ แต่ฉันจำเป็นต้องมีดรอปดาวน์เนื่องจากเราต้องการให้ค่าเริ่มต้นบางค่าเป็นตัวเลือกการเริ่มต้นในกรณีที่ผู้ใช้ไม่รู้ว่าจะค้นหาอะไร ฉันใช้สิ่งนี้กับ MVC DropDownListFor เนื่องจากสร้างตัวควบคุมการเลือกสำหรับเรา ฉันพบบทความนี้ซึ่งเหมาะกับฉัน https://github.com/danielfarrell/bootstrap-combobox/pull/20 สิ่งที่ฉันต้องทำคือถอดชื่อออกจากตัวควบคุมการเลือกและตัวควบคุมก็ให้ฉันป้อนข้อความในรูปแบบอิสระ ดีทั้งหมดจนถึงตอนนี้ ตอนนี้ฉันใช้สิ่งนี้ร่วมกับ Knockoutjs ฉันผูกตัวเลือกและค่าที่เลือกกับตัวควบคุมการเลือกจากนั้นในแถวที่แสดงเทมเพลตของฉันฉันเรียกว่า (ตัวเลือก). combobox () ซึ่งทำให้ตัวเลือกควบคุม comobobox bootstrap และเพิ่มตัวควบคุมอินพุตและซ่อนตัวควบคุมการเลือกในฉาก หลัง ปัญหาตอนนี้คือเมื่อฉันพยายามดึงค่าเขาไปโพสต์ไปยังเซิร์ฟเวอร์เนื่องจากค่าที่ฉันใส่ในช่องป้อนข้อมูลไม่ใช่ตัวเลือกที่ถูกต้องจากตัวเลือกที่ฉันให้เพื่อเลือกการควบคุมจึงมักตั้งค่าเป็นตัวเลือกแรกตามค่าเริ่มต้น นี่เป็นเพราะฉันตั้งค่าการเชื่อมโยงของค่าที่เลือกบนตัวควบคุมที่เลือกไม่ใช่ในกล่องอินพุตที่สร้างโดย bootstrap-combobox.js คำถามของฉันคือฉันจะทำให้กล่องอินพุตเชื่อมโยงข้อมูลกับ porperty เดียวกันกับที่ตัวควบคุมเลือกถูกผูกไว้ได้อย่างไร ตัวเลือกอื่น ๆ ?? โปรดแจ้งให้เราทราบหากคุณต้องการคำชี้แจงเพิ่มเติมหรือมีคำถาม ช่วยแนะนำหน่อยครับ. ขอบคุณ

18
ฉันจะทำให้ Bootstrap popovers มีชีวิตอยู่ได้อย่างไรในขณะที่ถูกโฉบ
ฉันใช้ Bootstrap popover เพื่อสร้างการ์ดโฮเวอร์ที่แสดงข้อมูลผู้ใช้และฉันกำลังเรียกใช้มันเมื่อวางเมาส์เหนือปุ่ม ฉันต้องการให้ป๊อปโอเวอร์นี้มีชีวิตอยู่ในขณะที่ป๊อปโอเวอร์นั้นถูกวางไว้ แต่มันจะหายไปทันทีที่ผู้ใช้หยุดวางเมาส์เหนือปุ่ม ฉันจะทำเช่นนี้ได้อย่างไร? $('#example').popover({ html : true, trigger : 'manual', content : function() { return '<div class="box">Popover</div>'; } }); $(document).on('mouseover', '#example', function(){ $('#example').popover('show'); }); $(document).on('mouseleave', '#example', function(){ $('#example').popover('hide'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <a href="#" id="example" class="btn btn-danger" rel="popover" >hover for …

3
Bootstrap v4 datepicker [ปิด]
ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน2 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันใช้ Bootstrap V4 สำหรับเว็บไซต์ใหม่โดยเห็นว่าอยู่ใน Alpha อย่างไรก็ตามฉันไม่เห็นว่ามันมี datepicker.js ในบิลด์ ไม่มีใครรู้ว่าสิ่งนี้จะรวมอยู่ใน V4 หรือไม่? ถ้าไม่มีใครสามารถแนะนำ datepicker ที่ดีได้?

9
วิธีซ่อนแถบนำทาง Bootstrap 4 ที่ยุบได้เมื่อคลิก
ฉันได้สร้างแถบนำทางที่ยุบได้นี้โดยใช้ Bootstrap 4 ซึ่งใช้งานได้ดี แต่ฉันต้องการปิดเมื่อผู้ใช้คลิกที่ลิงค์ วิธีใดในการทำเช่นนี้ ขอบคุณ html navbar: <nav class="navbar navbar-toggleable-md fixed-top"> <button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="container"> <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a> <div class="collapse navbar-collapse" id="navbarDiv"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#home">Home <span …

13
สี navbar ใน Twitter Bootstrap
ฉันจะเปลี่ยนสีพื้นหลังของแถบนำทางของ Twitter Bootstrap 2.0.2 ได้อย่างไร ฉันจะเปลี่ยนสีขององค์ประกอบทั้งหมดของแถบนำทางเพื่อสะท้อนสีพื้นหลังได้อย่างไร

21
Angular 4: จะรวม Bootstrap ได้อย่างไร?
ฉันเป็นนักพัฒนาแบ็กเอนด์และฉันแค่เล่นกับ Angular4 ดังนั้นผมจึงไม่ได้ติดตั้งการกวดวิชานี้: https://www.youtube.com/watch?v=cdlbFEsAGXo ด้วยเหตุนี้ฉันจะเพิ่ม bootstrap ลงในแอปได้อย่างไรเพื่อให้ฉันสามารถใช้คลาส "container-fluid" หรือ "col-md-6" และอะไรทำนองนั้นได้

4
Bootstrap 4: เมนูแบบเลื่อนลงจะปิดทางด้านขวาของหน้าจอ
ฉันไม่สามารถดึงรายการแบบเลื่อนลงเพื่อไม่ให้ออกจากหน้าได้ ฉันลองสองสามอย่างจาก BS3 แต่ดูเหมือนจะไม่ได้ผล ฉันไม่แน่ใจว่าเป็นเพราะไฟล์ml-auto. (ละเว้นคำสั่ง if-else) นี่คือCodePen : <div class="container-fluid"> <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #3c763d!important;"> <button class="navbar-toggler navbar-toggler-right navbar-toggler-custom" type="button" data-toggle="collapse" data-target="#searchNav" aria-controls="searchav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- <button class="navbar-toggler navbar-toggler-right" type="button" …

9
วิธีตรวจสอบว่าโมดอล bootstrap เปิดอยู่หรือไม่ฉันจึงสามารถใช้ jquery validate ได้
ฉันจำเป็นต้องทำการตรวจสอบความถูกต้องก็ต่อเมื่อโมดอลเปิดอยู่เพราะถ้าฉันเปิดแล้วฉันก็ปิดมันและฉันกดปุ่มที่เปิดโมดอลมันใช้ไม่ได้เพราะกำลังทำการตรวจสอบ jquery แต่ไม่ใช่ แสดงเนื่องจากโมดอลถูกปิด ดังนั้นฉันต้องการโฆษณา jquery หากโมดอลเปิดอยู่เพื่อให้ฉันตรวจสอบความถูกต้องเป็นไปได้หรือไม่ <script> $(document).ready(function(){ var validator =$('#form1').validate( { ignore: "", rules: { usu_login: { required: true }, usu_password: { required: true }, usu_email: { required: true }, usu_nombre1: { required: true }, usu_apellido1: { required: true }, usu_fecha_nac: { required: true }, usu_cedula: { required: …

18
Angular ng-repeat เพิ่มแถว bootstrap ทุกๆ 3 หรือ 4 cols
ฉันกำลังมองหารูปแบบที่ถูกต้องในการฉีดคลาสแถว bootstrap ทุกๆ 3 คอลัมน์ ฉันต้องการสิ่งนี้เพราะ cols ไม่มีความสูงคงที่ (และฉันไม่ต้องการแก้ไข) ดังนั้นมันจึงทำให้การออกแบบของฉันแตก! นี่คือรหัสของฉัน: <div ng-repeat="product in products"> <div ng-if="$index % 3 == 0" class="row"> <div class="col-sm-4" > ... </div> </div> </div> แต่จะแสดงเพียงหนึ่งผลิตภัณฑ์ในแต่ละแถว สิ่งที่ฉันต้องการผลลัพธ์สุดท้ายคือ: <div class="row"> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div> </div> <div class="row"> <div class="col-sm4"> …

29
Bootstrap modal: พื้นหลังกระโดดขึ้นไปด้านบนเพื่อสลับ
ฉันมีปัญหากับกิริยา ฉันมีปุ่มบนหน้าซึ่งจะสลับโมดอล เมื่อโมดอลปรากฏขึ้นหน้าจะกระโดดขึ้นไปด้านบน ฉันทำทุกอย่างเท่าที่ทำได้เพื่อหาทางแก้ไข / ฯลฯ แต่ฉันหลงทางจริงๆ แก้ไข: ฉันได้ลองด้วย: $('#myModal').modal('show');แต่มันก็มีผลเช่นเดียวกัน

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