bootstrap-4

Bootstrap 4 Dropdown - Disable auto placement caused by popper.js

由 落花浮王杯 提交于 2019-12-17 20:23:55
问题 I'm working with Bootstrap 4 dropdown and there are about 18 dropdown items. Because the height is too much, popper.js automatically moves the dropdown away from its original position to the top of the screen. How do I prevent this? I always want the dropdown to appear right below the button that toggles it. Thanks Posting code as requested - ( I'm using C# but the code should convey the point I'm hoping) <div class="dropdown"> <span class="p-2 text-uppercase font-weight-semi-bold pointer

How do I add a data-offset to a Bootstrap 4 fixed-top responsive navbar?

由 一世执手 提交于 2019-12-17 19:57:10
问题 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

Bootstrap 4.0.0 Carousel fade transition

由 我们两清 提交于 2019-12-17 19:16:43
问题 There are several questions asked on Stackoverflow regarding Carousel fade transition but none of them seem to work on a default 4.0.0 implementation: <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div

Horizontally scrollable list of cards in Bootstrap

由 半腔热情 提交于 2019-12-17 18:23:53
问题 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)

Horizontally scrollable list of cards in Bootstrap

由 岁酱吖の 提交于 2019-12-17 18:21:08
问题 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)

Bootstrap 4 default navbar is not working..

由 故事扮演 提交于 2019-12-17 17:09:08
问题 I want to get navbar but I m not getting it after many failed attempts I came here for help. <!DOCTYPE html> <html lang="en"> <head> <title>Portofolio</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs

How can I have Brand and Navbar on separate lines?

由 心已入冬 提交于 2019-12-17 17:08:37
问题 Pretty simple, but I'm fairly amateur with Bootstrap. I understand how to make the navigation bar with an image as the brand and the nav-items. Without hacking it, is there a proper way to have the brand positioned above the expanded navigation? Basically looking for this; EXPANDED ----------------------------------------- | Logo | ----------------------------------------- | Home About Contact | ----------------------------------------- COLLAPSED ----------------- | Logo ≡ | -----------------

bootstrap 4 styled select

由 雨燕双飞 提交于 2019-12-17 16:28:29
问题 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=

Column ordering in Bootstrap 4 with push/pull and col-md-12

由 混江龙づ霸主 提交于 2019-12-17 16:27:25
问题 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

Affix is not working in Bootstrap 4 (alpha)

由 北战南征 提交于 2019-12-17 15:47:37
问题 According to Bootstrap 3 docs I have added following attributes to a navbar: <nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" > ... </nav> After scrolling down the page Bootstrap 4 is not adding class to navbar which is affix. Can anyone tell me how to solve this problem? Bootstrap.js and jQuery.js are working. 回答1: Although the affix is removed from Bootstrap in version 4. However, you can achieve your goal through this jQuery Code: $(window).on('scroll', function
订阅 bootstrap-4