bootstrap-4

问题 This question already has answers here : `col-xs-*` not working in Bootstrap 4 (3 answers) Closed 9 months ago . In my react project, using react-bootstrap, it's loading all all the css for the grid sizes, except for the xs set. the xs set does, however, get the default styles applied to all grid sizes, but does not include the media query. Is there something obvious I am missing? Bootstrap 4 回答1: The -xs- infix was removed from Bootstrap 4 Alpha 6, so the classes are simply, col-1 , col-2 ..

问题 Is there a way in Bootstrap 4 to add the class 'btn-sm' (small button) when in the media-breakpoint-xs? I'd like to the buttons to be default size except in xs screens where I'd like them to automatically switch to btn-sm. 回答1: Assign .btn the .btn-sm sizing using the media-breakpoint-between mixin... /* change all .btn to .btn-sm size on xs */ @include media-breakpoint-between(xs,sm){ .btn { @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm); } }

问题 I have been looking for a way to add a footer to a Twitter Bootstrap 3 project I am working on. What I want is for the footer to stick to the bottom of the page when the content is too short to fill out the screen, but get pushed down by content when the content does fill the screen. All solutions I have found & tried so far, has either not worked, had the footer ALWAYS shown, or had the footer below the page, so it was only visible upon scrolling. Thanks in advance! 回答1: Update 2017 There is

问题 I feel like this should be obvious to find but I have not come up with anything. Bootstrap 4 has utility class for adding and removing a border, but is there support for defining the border width or style like solid or dashed? <span class="border"></span> <span class="border-top"></span> <span class="border-right"></span> <span class="border-bottom"></span> <span class="border-left"></span> There are some classes that changes the margins and padding such as mr-3 and pt-2 . Maybe I just need

问题 I have the following bootstrap html code (its JSX hence the className but the idea is the same): <div className="toggleView btn-group center-block" role="group" aria-label="Basic example"> <button onClick={this.handleTimelineClick} type="button" className={this.state.toggleCalendar == false ? "btn btn-secondary active" : "btn btn-secondary"}>Timeline</button> <button onClick={this.handleCalendarClick} type="button" className={this.state.toggleCalendar == true ? "btn btn-secondary active " :

问题 I'm trying to create 3 columns of content with a bit of margin between each so that with shadow they look distinct. However when I add some margin with mr-3 to the left and middle columns this makes the columns go beyond the width of the space and wrap. How can I create space between the cards/columns without making them go over the available space? https://codepen.io/anon/pen/KeYgvg 回答1: If you set margins on the columns it will "break" the Bootstrap grid. The spacing between the columns

问题 I am working in an angular 4 project ,In this I have a mega menu .What I want to do is when I clicked on a menu inside the mega menu I want to close it . In my case it always open even after I clicked on a specific menu ,but closed if I remove the mouse focus in it . Stackblitz : https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-w1qhj4?file=app/app.component.html can anyone help me to fix it . 回答1: Your application contains error(Check Inspector tools console for details). Try

问题 This question already has answers here : Bootstrap 4 collapsing two navbars into one toggle button (2 answers) Closed last year . Wondering if it's possible to have two navigation bars displaying on separate rows on desktop, but have the two navbars collapse into one toggler on tablet and mobile. Essentially, I want the top navbar to contain the brand, and then four or five menu items, while the second navbar would not contain a brand but instead just four or five more navigation elements. I

问题 I am making a card with equal image size and text. I had given max-height to the image. but the images are not equal in size . I will give my code below. I am attaching my website's snap for better reference. In this project, I am using HTML, CSS and BOOTSTRAP4 Problem is : Image .kbcard { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: auto; text-align: center; font-family: arial; } .kbtitle { color: grey; font-size: 18px; } a .kb{ text-decoration: none; font-size: 22px

问题 I'm using Bootstrap v4.0 beta and I have checked this migration doc https://v4-alpha.getbootstrap.com/migration/#responsive-utilities but there's no way to make the hidden-X-up or hidden-X-down work. Here is an example of my code: <div class="container"> <div class="row"> <div class="col-md-3 hidden-md-down"> <p class="title">Join us</p> <p class="subtitle">Just click on the button below</p> <p class="link"><a href="#" class="outstanding-link">the button below</a></p> </div> </div> </div> it