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

Bootstrap 4 เป็นเวอร์ชันหลักลำดับที่สี่ของไลบรารีส่วนประกอบส่วนหน้ายอดนิยม เฟรมเวิร์ก 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 แต่มันทำให้การจัดแนวนั้นยุ่งเหยิงไปหมด ผมทำอะไรผิดหรือเปล่า?
10
Bootstrap NavBar ที่มีรายการตรงกลางซ้ายหรือขวา
ในBootstrapวิธีที่เป็นมิตรกับแพลตฟอร์มที่สุดในการสร้างแถบการนำทางที่มีโลโก้ A อยู่ทางซ้ายรายการเมนูที่อยู่ตรงกลางและโลโก้ B ทางด้านขวา นี่คือสิ่งที่ฉันได้ลองมาแล้วและมันก็อยู่ในแนวเดียวกันเพื่อให้โลโก้ A อยู่ทางซ้ายรายการเมนูถัดจากโลโก้ด้านซ้ายและโลโก้ B ทางด้านขวา <div class="navbar navbar-fixed-top navbar-custom "> <div class="container" > <div class="navbar-header"> <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> <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">Menu Item 1</a></li> …
30
ห้าคอลัมน์ที่เท่ากันใน bootstrap Twitter
ฉันต้องการมี 5 คอลัมน์เท่ากันในหน้าฉันกำลังสร้างและฉันไม่สามารถเข้าใจได้ว่ามีการใช้กริด 5 คอลัมน์ที่นี่ได้อย่างไร: http://web.archive.org/web/20120416024539/http://domain7 เครื่องมือ .com / / มือถือ / บูต / ตอบสนอง ตารางห้าคอลัมน์ถูกแสดงไว้เหนือส่วนหนึ่งของเฟรมเวิร์ก bootstrap twitter หรือไม่?
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 …
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" …
9
Bootstrap 4 - การโยกย้าย Glyphicons?
เรามีโครงการที่ใช้ glyphicons อย่างเข้มข้น Bootstrap v4 จะลดฟอนต์ glyphicon ทั้งหมด มีไอคอนเทียบเท่ากับที่จัดส่งกับ Bootstrap V4 หรือไม่? http://v4-alpha.getbootstrap.com/migration/
10
มองไม่เห็น - ** และซ่อน - ** ใน Bootstrap v4
ใน Bootstrap v3 ฉันมักจะใช้ที่ซ่อนอยู่ - คลาส ** รวมกับ clearfix เพื่อควบคุมเลย์เอาต์แบบหลายคอลัมน์ที่ความกว้างหน้าจอที่แตกต่างกัน ตัวอย่างเช่น, ฉันสามารถรวมหลายซ่อน - ** ในหนึ่ง DIV เพื่อให้คอลัมน์หลายคอลัมน์ของฉันปรากฏอย่างถูกต้องที่ความกว้างหน้าจอที่แตกต่างกัน ตัวอย่างเช่นถ้าฉันต้องการที่จะแสดงแถวของรูปถ่ายสินค้า, 4 ต่อแถวบนขนาดหน้าจอที่ใหญ่กว่า, 3 บนหน้าจอขนาดเล็กแล้ว 2 บนหน้าจอขนาดเล็กมาก รูปถ่ายสินค้าอาจมีความสูงแตกต่างกันดังนั้นฉันต้องการ clearfix เพื่อให้แน่ใจว่าแถวแตกหักอย่างถูกต้อง นี่คือตัวอย่างใน v3 ... http://jsbin.com/tosebayode/edit?html,css,output ตอนนี้ที่ v4 ทำกับคลาสเหล่านี้และแทนที่ด้วยคลาสที่มองเห็น / ซ่อน - ** - ขึ้น / ลงคลาสฉันดูเหมือนจะต้องทำสิ่งเดียวกันกับ DIV หลายตัวแทน นี่คือตัวอย่างที่คล้ายกันใน v4 ... http://jsbin.com/sagowihowa/edit?html,css,output ดังนั้นฉันจึงไปจาก DIV …
6
จัดชิดซ้ายและจัดชิดขวาภายใน div ใน Bootstrap
อะไรคือวิธีการทั่วไปในการจัดแนวข้อความและการจัดแนวข้อความอื่น ๆ ภายในคอนเทนเนอร์ div ใน bootstrap? เช่น Total cost $42 ค่าใช้จ่ายทั้งหมดข้างต้นควรจัดชิดข้อความและ $ 42 เป็นข้อความชิดขวา
23
วิธีแก้ไขข้อผิดพลาด; 'ข้อผิดพลาด: เคล็ดลับเครื่องมือ Bootstrap ต้องใช้ Tether (http://github.hubspot.com/tether/)'
ฉันใช้ Bootstrap V4 และข้อผิดพลาดต่อไปนี้ถูกบันทึกไว้ในคอนโซล ข้อผิดพลาด: เคล็ดลับเครื่องมือ Bootstrap ต้องการ Tether ( http://github.hubspot.com/tether/ ) ฉันพยายามลบข้อผิดพลาดโดยติดตั้ง Tether แต่มันไม่ทำงาน ฉันได้ติดตั้ง 'Tether' โดยใส่รหัสต่อไปนี้ <link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css"> <script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> ฉันได้ติดตั้ง 'tether' ถูกต้องแล้วหรือยัง ทุกคนสามารถช่วยฉันลบข้อผิดพลาดนี้ได้หรือไม่ หากคุณต้องการดูข้อผิดพลาดในเว็บไซต์ของฉันโปรดคลิกที่นี่และโหลดคอนโซลของคุณ
11
Bootstrap 4 Center การจัดแนวตั้งและแนวนอน
ฉันมีหน้าเว็บที่มีแบบฟอร์มเท่านั้นและฉันต้องการให้แบบฟอร์มอยู่ตรงกลางของหน้าจอ <div class="container"> <div class="row justify-content-center align-items-center"> <form> <div class="form-group"> <label for="formGroupExampleInput">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> </div> <div class="form-group"> <label for="formGroupExampleInput2">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> </div> </form> </div> </div> การjustify-content-centerจัดแนวแบบฟอร์มในแนวนอน แต่ฉันไม่สามารถหาวิธีจัดแนวตั้งได้ ฉันได้พยายามที่จะใช้align-items-centerและalign-self-centerแต่มันไม่ทำงาน ฉันพลาดอะไรไป การสาธิต
4
เว็บไซต์ที่ตอบสนองได้ย่อขยายให้เต็มความกว้างบนมือถือ
ฉันกำลังทดสอบแถบนำทางการตอบสนอง Bootstrap และฉันมีเว็บไซต์ตัวอย่าง เมื่อฉันปรับขนาดเบราว์เซอร์บนเดสก์ท็อปทุกอย่างทำงานได้ดีรวมถึงแถบนำทางซึ่งกลายเป็นเมนูที่พับได้ด้วยไอคอนขนาดเล็กที่ด้านบนซึ่งฉันสามารถคลิกเพื่อดูปุ่มเมนูเพิ่มเติม แต่เมื่อฉันลองจากเบราว์เซอร์มือถือ (ฉันลองใช้ Chrome และเบราว์เซอร์อินเทอร์เน็ตบน Android) ฉันไม่เห็นการออกแบบที่ตอบสนองได้ ฉันเห็นเฉพาะเดสก์ท็อปรุ่นเล็ก ๆ อย่างเว็บไซต์เท่านั้น ใครช่วยชี้ให้เห็นสิ่งที่ฉันทำผิด?
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.