bootstrap-4

How to use Popper.js with Bootstrap 4 beta

由 耗尽温柔 提交于 2019-12-17 15:35:28
问题 I'm old school, so I downloaded the source code to 1.12.0 and then did the following: <script src="/popper.js-1.12.0/dist/popper.js"></script> <script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script> But I'm getting: Uncaught SyntaxError: Unexpected token export on line 2294 where it says: export default Popper; 回答1: You want to use the dist target specified in the package.json file as main entry. In this case, you are looking for the umd build (dist/umd/popper.js) What's UMD? The

Bootstrap 3 and 4 .container-fluid with grid adding unwanted padding

由 随声附和 提交于 2019-12-17 15:24:42
问题 I'd like my content to be fluid, but when using .container-fluid with Bootstrap's grid, I'm still seeing padding. How can I get rid of the padding? I see that I don't get the padding with .row, but I want to add columns, and as soon as I do, the padding is back :O. I want to be able to use the columns at full width. An example: <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

How can I get my Twitter Bootstrap buttons to right align?

由 可紊 提交于 2019-12-17 15:03:03
问题 I have a simple demo here: 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> I have an unordered list and for each list item I wish to have text on the left and then a right aligned button. I have tried to use pull-right but this completely messes up the alignment. What am I doing wrong? 回答1: Insert pull-right into the class attribute and let bootstrap arrange the buttons. For Bootstrap 2

How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

由 拈花ヽ惹草 提交于 2019-12-17 12:19:10
问题 I have a two columns layout like this: <div class="row"> <div class="col-xs-8 content"> </div> <div class="col-xs-4"> </div> </div> If I set the position:sticky to the sidebar column, I get the sticky behaviour of the sidebar: https://codepen.io/marcanuy/pen/YWYZEp CSS: .sticky { position: sticky; top: 10px; } HTML: <div class="row"> <div class="col-xs-8 content"> </div> <div class="col-xs-4 sticky"> </div> </div> But when I set the sticky property only to the menu that is located in the

How do I make card-columns order horizontally?

由 老子叫甜甜 提交于 2019-12-17 12:15:29
问题 I have a smart-scrolling list of cards, and while I love the look of card-columns , its pretty frustrating that it orders top to bottom, like so: 1 4 7 2 5 8 3 6 9 This vertical ordering seems basically useless for anything where the content loads more than a few items. If I have 50 items, some of the least important ones will be at the top! I've tried some variations using flexbox, but couldn't get anything to work. Does anyone have horizontal ordering working? 回答1: As documented, the order

Bootstrap 4 - I don't want columns to have the same height

由 和自甴很熟 提交于 2019-12-17 09:58:21
问题 In this bootstrap 4 example the 2 columns have the same height. I do not want this. Is there a quick fix for this ? <div class="col-lg-3 card bg-faded"> <h1><small>Some favorites</small></h1> <ul> <li>Celery root</li> <li>Spaghetti Squash</li> <li>Killer Mushrooms</li> </ul> </div> <div class="col-lg-9"> <h1>Wild & Wicky Vegetables</h1> <p>Kale c.....t.</p> </div> </div><!--row--> 回答1: Yes, you can use d-block on the row, and float-left on the columns to make it work the Bootstrap 3.x way

How to fix unexpected column order in bootstrap 4?

由 早过忘川 提交于 2019-12-17 07:55:53
问题 I'm trying to make a layout like the following: On xs devices, I'd like the order to be first-second-third. The sample code I have is: <!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <style type="text/css"> div.short { height: 100px; background-color: rgb(174, 199, 232); } div.medium { height: 200px; background-color: rgb(255, 187

How to fix unexpected column order in bootstrap 4?

由 蹲街弑〆低调 提交于 2019-12-17 07:54:02
问题 I'm trying to make a layout like the following: On xs devices, I'd like the order to be first-second-third. The sample code I have is: <!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <style type="text/css"> div.short { height: 100px; background-color: rgb(174, 199, 232); } div.medium { height: 200px; background-color: rgb(255, 187

Bootstrap 4: Navbar with logo and 2 rows

由 纵饮孤独 提交于 2019-12-17 07:41:29
问题 I am trying to create a website header that conforms to the schematic below using Bootstrap 4: The code I am using to achieve this is as follows (extraneous code omitted): <div class="navbar"> <div class="container yellow"> <div class="row"> <div class="col-sm-4 green">Logo</div> <div class="col-sm-8 green"> <div class="row"> <div class="col text-right red"> (00) 1234 5678 </div> </div> <div class="row"> <div class="col text-right red"> <!-- nav links here --> <a href="#">link</a> </div> <

Add spacing between vertically stacked columns in Bootstrap 4

由 岁酱吖の 提交于 2019-12-17 07:37:43
问题 Unfortunately, there doesn't seem to be a good way to manage vertical spacing between columns that transition from a horizontal stack to a vertical stack at certain breakpoints. There does seem to be a solution when a form is involved, but that's not the situation here. I've tried this solution, but it doesn't work when there are multiple columns that wrap in a row. To illustrate my scenario, here's the structure of my HTML: <body> <div class="container"> <div class="row"> <div class="col-md
订阅 bootstrap-4