twitter-bootstrap-4

问题 So, in Bootstrap v3, you would just add a data-offset attribute to the nav tag, with the pixel offset, in this case 54px, <nav data-offset="54"></nav> However, in Bootstrap v4, this data-offset attribute is missing, and doesn't work. I've had a look through the v4 docs, and just can't seem to find anything! I've also tried using data-offset and offset attributes, but these don't work either. Here is the html code of the nav <nav class="navbar navbar-light bg-faded navbar-fixed-top"> <button

问题 I want to make a navbar using Bootstrap 4 and Angular 2 that collapses his content on a button when the width of the browser reaches some value. I achieve this, and when the navbar collapses I can see the button that encloses the elements in the navbar, but this button doesn't work. How can I fix this without using jquery? I was trying to use ng-bootstrap. In the image you can see the button when the navbar collapses. My code so far: <nav class="navbar navbar-expand-md fixed-top navbar-dark

问题 I am trying to create a horizontal list of cards where 3 cards are shown at a time and the other ones are horizontally scrollable, like this: This can be done with CSS pretty easily, but I want to do this using Bootstrap. Bootstrap 4 ships with cards as popularized by material design and they are as easy to use as anything else in Bootstrap. For this example instead of cards it could also be regular div s. The thing I am struggling with is creating a scrollable container of X cards (or divs)

问题 I am trying to create a horizontal list of cards where 3 cards are shown at a time and the other ones are horizontally scrollable, like this: This can be done with CSS pretty easily, but I want to do this using Bootstrap. Bootstrap 4 ships with cards as popularized by material design and they are as easy to use as anything else in Bootstrap. For this example instead of cards it could also be regular div s. The thing I am struggling with is creating a scrollable container of X cards (or divs)

问题 i would like to display a dropdown / select as an input with bootstrap 4. so far the only select thing i found in the documentation ist this. which works, but does not look very bootstrap like and does not support icons, grouping dividers and stuff. is there any way to fit a select with the functionality of a dropdown from bootstrap? something like this, but only as form input of sorts: <div class="btn-group"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle=

问题 I've two columns with the class col-md-12 each. In desktop view they should display like: Col **1** Col **2** In the mobile view the should display like this: Col **2** Col **1** Is this even possible with the column ordering of Bootstrap? My current code: <div class="row"> <div class="col-xs-push-12 col-md-12"> Col 1 </div> <div class="col-xs-pull-12 col-md-12"> Col 2 </div> </div> 回答1: UPDATE (FEB 2018) - v4+ Now that bootstrap has been released, you can achieved that using order utility

问题 This is my code, what I want to achieve is only four columns in a row, and no more or less than that, but currently, the number of cards range from 1-10, they keep compressing until 10. <div class="card-deck-wrapper"> <div class="card-deck"> @foreach($resource->projects as $project) <div class="card card-project"> bla bla (every card let's say is like this) </div> @endforeach </div> </div> 回答1: As explained in the docs, Card layouts (decks, groups and columns)... "For the time being, these

问题 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

问题 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

问题 Is it possible to order Bootstrap 4 Cards from left to right when wrapped in .card-columns ? Top to bottom (default): 1 3 5 2 4 6 Left to right: 1 2 3 4 5 6 Because of the varying height it is necessary for me to use an Masonry-like grid. 回答1: The order of the CSS columns is top to bottom, then left to right so the order of the rendered columns will be.. 1 3 5 2 4 6 There is no way to change the order of CSS columns. It's suggested you use another solution like Masonry. https://github.com