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

ฉันกำลังใช้ป๊อปอัปกับ Twitter Bootstrap ซึ่งริเริ่มขึ้นดังนี้: $('.popup-marker').popover({ html: true, trigger: 'manual' }).click(function(e) { $(this).popover('toggle'); e.preventDefault(); }); อย่างที่คุณเห็นพวกมันจะถูกเรียกใช้งานด้วยตนเองและคลิกที่. popup-marker (ซึ่งเป็น div ที่มีภาพพื้นหลัง) เพื่อเปิดป๊อปอัป สิ่งนี้ใช้งานได้ดี แต่ฉันต้องการที่จะสามารถปิดป๊อปโอเวอร์ด้วยการคลิกที่ใดก็ได้บนหน้าเว็บ (แต่ไม่ใช่ในป๊อปโอเวอร์เอง!) ฉันได้ลองทำสิ่งต่าง ๆ รวมถึงรายการต่อไปนี้ แต่ไม่มีผลลัพธ์ที่จะแสดง: $('body').click(function(e) { $('.popup-marker').popover('hide'); }); ฉันจะปิด popover ด้วยการคลิกที่ใดก็ได้บนหน้าเว็บ แต่จะไม่ปิดคลิกด้วยตัวเอง

155 javascript  jquery  twitter-bootstrap 

documention ล่าสุดมี: <p class="mb-0">Lorem ipsum</p> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ถาม: mb-0 คืออะไร

155 css  twitter-bootstrap  bootstrap-4  twitter-bootstrap-4 

ฉันกำลังพยายามเปลี่ยนขนาดของแบบฟอร์ม modal หรือค่อนข้าง - ให้มันตอบสนองต่อเนื้อหาที่ฉันแสดงที่นั่น ฉันใช้มันเพื่อแสดงผลแบบฟอร์มและต้องการจัดการกับการเลื่อนหากต้องการตัวเอง รูปแบบที่ฉันแสดงอาจต้องการอีก 50px - แค่ปุ่มหาย ดังนั้นฉันได้ลองเขียนทับ. modal style ในไฟล์ application.css.scss ของฉัน (โดยใช้ Rails 3.2) แต่ดูเหมือนว่าจะเขียนทับความสูงสูงสุดและล้นเกิน ความคิดใด ๆ

154 twitter-bootstrap 

ฉันกำลังพยายามเพิ่มการตรวจสอบความถูกต้องให้กับฟอร์มของฉันด้วย jQuery Validation Plugin แต่ฉันมีปัญหาที่ปลั๊กอินใส่ข้อความแสดงข้อผิดพลาดเมื่อฉันใช้กลุ่มอินพุต $('form').validate({ rules: { firstname: { minlength: 3, maxlength: 15, required: true }, lastname: { minlength: 3, maxlength: 15, required: true } }, highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); } }); รหัสของฉัน: http://jsfiddle.net/hTPY7/4/

154 twitter-bootstrap  jquery-validate  twitter-bootstrap-3 

อัปเดตอีกครั้ง:ฉันกำลังปิดคำถามนี้โดยเลือกคำตอบยอดนิยมเพื่อป้องกันไม่ให้ผู้คนเพิ่มคำตอบโดยไม่เข้าใจคำถามจริงๆ ในความเป็นจริงไม่มีวิธีที่จะทำกับการสร้างในการทำงานโดยไม่ต้องใช้กริดหรือเพิ่ม CSS พิเศษ กริดทำงานได้ไม่ดีหากคุณต้องรับมือกับhelp-blockองค์ประกอบที่จำเป็นต้องทำมากกว่าการป้อนข้อมูลสั้น ๆ แต่พวกมันคือ 'build-in' ถ้าเป็นเรื่องที่ผมขอแนะนำให้ใช้คลาส CSS พิเศษที่คุณจะพบในการอภิปราย BS3 ที่นี่ ตอนนี้ BS4 ออกมาแล้วมันเป็นไปได้ที่จะใช้สไตล์การปรับขนาดที่รวมไว้เพื่อจัดการสิ่งนี้ดังนั้นสิ่งนี้จะไม่เกี่ยวข้องกันอีกต่อไป ขอขอบคุณทุกท่านที่ให้ความสำคัญกับคำถาม SO ที่ได้รับความนิยมนี้ ปรับปรุง:คำถามนี้ยังคงเปิดอยู่เพราะมันเป็นเรื่องเกี่ยวกับตัวในการทำงานในระดับปริญญาตรีสาขาการจัดการความกว้างของการป้อนข้อมูลโดยไม่ต้อง resorting ตาราง (บางครั้งพวกเขาจะต้องมีการจัดการอย่างเป็นอิสระ) ฉันใช้คลาสที่กำหนดเองเพื่อจัดการสิ่งนี้อยู่แล้วดังนั้นนี่ไม่ใช่วิธีการเกี่ยวกับ css ขั้นพื้นฐาน งานอยู่ในรายการสนทนาคุณลักษณะของ BS และยังไม่ได้รับการแก้ไข คำถามเดิม: ทุกคนสามารถหาวิธีจัดการความกว้างของอินพุตใน BS 3 ได้หรือไม่? ขณะนี้ฉันใช้คลาสที่กำหนดเองเพื่อเพิ่มฟังก์ชันการทำงานนั้น แต่ฉันอาจพลาดบางตัวเลือกที่ไม่มีเอกสาร เอกสารปัจจุบันบอกว่าจะใช้. col-lg-x แต่ไม่สามารถใช้งานได้อย่างชัดเจนเนื่องจากสามารถใช้กับคอนเทนเนอร์ div เท่านั้นซึ่งจะทำให้เกิดปัญหาเกี่ยวกับเลย์เอาต์ / โฟลตทุกชนิด นี่คือซอ แปลกคือบนซอฉันไม่สามารถแม้แต่จะปรับขนาดกลุ่มแบบฟอร์มได้ http://jsfiddle.net/tX3ae/ <form role="form" class="row"> <div …

154 css  twitter-bootstrap  twitter-bootstrap-3 

มีวิธีการกำหนดมากกว่าหนึ่งเหตุการณ์ให้กับตัวควบคุมการบูตผ่าน "data-toggle" หรือไม่ ตัวอย่างเช่นสมมติว่าฉันต้องการปุ่มที่มี "คำแนะนำเครื่องมือ" และ "ปุ่ม" สลับที่ได้รับมอบหมาย Tried data-toggle = "ปุ่มคำแนะนำเครื่องมือ" แต่คำแนะนำเครื่องมือทำงานเท่านั้น แก้ไข: นี่เป็น "วิธีแก้ปัญหา" ได้อย่างง่ายดายด้วย $("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

154 button  twitter-bootstrap  binding 

ความต้องการของฉันคือโทรแจ้งเตือนเมื่อฉันคลิกที่ปุ่มเพิ่มไปยังสิ่งที่ปรารถนาและควรหายไปการแจ้งเตือนใน 2 วินาที นี่คือวิธีที่ฉันลอง แต่การแจ้งเตือนจะหายไปทันทีที่ปรากฏขึ้น ไม่แน่ใจว่าข้อผิดพลาดอยู่ที่ไหน .. ใครช่วยฉันได้บ้าง สคริปต์ JS $(document).ready (function(){ $("#success-alert").hide(); $("#myWish").click(function showAlert() { $("#success-alert").alert(); window.setTimeout(function () { $("#success-alert").alert('close'); }, 2000); }); }); รหัส HTML: <div class="product-options"> <a id="myWish" href="" class="btn btn-mini">Add to Wishlist </a> <a href="#" class="btn btn-mini"> Purchase </a> </div> กล่องแจ้งเตือน: <div class="alert alert-success" id="success-alert"> <button …

153 javascript  html  twitter-bootstrap  alert 

ฉันใช้ popover ของบูตของ Twitter ที่นี่ ตอนนี้เมื่อฉันเลื่อนข้อความ popover ที่ popover ปรากฏขึ้นพร้อมกับเพียงข้อความจาก<a>'s data-contentแอตทริบิวต์ ฉันสงสัยว่าถ้ามีอยู่แล้วที่จะนำ<div>ภายใน popover อาจเป็นไปได้ว่าฉันต้องการใช้ php และ mysql ในนั้น แต่ถ้าฉันสามารถทำให้ div ทำงานได้ฉันคิดว่าฉันสามารถหาส่วนที่เหลือได้ ฉันลองตั้งค่า data-content เป็นdivID แต่มันใช้งานไม่ได้ HTML: <a class='danger' data-placement='above' rel='popover' data-content='#PopupDiv' href='#'>Click</a>

151 twitter-bootstrap  popover 

ฉันมีปัญหาในการทำให้เสียงดังปัง (select2 + angulat-ui) ทำงานได้ http://plnkr.co/edit/NkdWUO?p=preview ในการตั้งค่าท้องถิ่นฉันได้งาน select2 แต่ฉันไม่สามารถกำหนดความกว้างตามที่อธิบายไว้ใน เอกสาร มันแคบเกินไปที่จะใช้ ขอบคุณ. แก้ไข: ไม่เป็นไรหรอกนะว่าฉันได้พบคนทำหมันทำงานอยู่ที่นี่ http://jsfiddle.net/pEFy6/ ดูเหมือนว่าเป็นพฤติกรรมของ select2 ที่จะยุบไปตามความกว้างขององค์ประกอบแรก ฉันสามารถตั้งค่าความกว้างผ่าน bootstrap class="input-medium"ยังไม่แน่ใจว่าทำไม angular-ui ไม่ใช้พารามิเตอร์ config

151 css  twitter-bootstrap  angularjs  jquery-select2 

ฉันต้องการที่จะใช้เมนูแบบเลื่อนลง twitter bootstrap นี่คือรหัสของฉัน: <span class="dropdown"> <a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li class="divider"></li> <li><a href="#">d</a></li> </ul> ดร็อปดาวน์ใช้งานได้ดีดรอปดาวน์ของฉันจะอยู่ติดกับขอบด้านขวาของหน้าจอและเมื่อฉันคลิกสลับดรอปดาวน์รายการจะอยู่นอกหน้าจอ ดูเหมือนว่าบนหน้าจอ: ฉันจะแก้ไขได้อย่างไร

151 html  css  twitter-bootstrap 

ฉันต้องการโต๊ะในเว็บไซต์ของฉัน ปัญหาคือตารางนี้จะมีประมาณ 400 บรรทัด ฉันจะจำกัดความสูงของตารางและใช้แถบเลื่อนกับมันได้อย่างไร นี่คือรหัสของฉัน: <div class="span3"> <h2>Achievements left</h2> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>Name</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Something</td> </tr> <tr> <td>2</td> <td>Something</td> </tr> <tr> <td>3</td> <td>Something</td> </tr> <tr> <td>4</td> <td>Something</td> </tr> <tr> <td>5</td> <td>Something</td> </tr> <tr> <td>6</td> <td>Something</td> </tr> </tbody> </table> <p><a class="btn" href="#">View details …

149 twitter-bootstrap 

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

149 twitter-bootstrap  twitter-bootstrap-3 

สมมติว่ามาร์กอัปนี้: <table class="table table-bordered" align="center"> ไม่ว่าจะมีเซลล์กี่เซลล์ตารางจะมีความกว้าง 100% เสมอ ทำไมเป็นอย่างนั้น?

148 twitter-bootstrap 

ฉันใช้ Twitter Bootstrap และมีแผนที่ Google รูปภาพบนแผนที่เช่นเครื่องหมายถูกเบ้โดย CSS ใน Bootstrap ใน Bootstrap CSS มี: img { border: 0 none; height: auto; max-width: 100%; } เมื่อฉันปิดการใช้งานmax-widthคุณสมบัติโดยใช้ Firebug ภาพเครื่องหมายจะปรากฏขึ้นตามปกติ ฉันจะป้องกัน Bootstrap CSS ไม่ให้ส่งผลกระทบต่อรูปภาพ Google maps ได้อย่างไร

147 google-maps  twitter-bootstrap  css 

ปิด. คำถามนี้เป็นคำถามปิดหัวข้อ ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นไปตามหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน7 ปีที่ผ่านมา ปรับปรุงคำถามนี้ มีBootstrap Twitterรุ่นโฮสต์หรือไม่ มีบางอย่างที่คล้ายคลึงกับ jQuery เวอร์ชันที่โฮสต์บน Google หรือไม่

144 twitter-bootstrap  cdn