bootstrap-4

问题 I would like to create a new button style in Bootstrap 4 with a white (#fff) text color. Mixin button-variant automatically sets the text color based on the background color. How can I use this mixin and set the color at the same time, without modifying _buttons.scss ? custom.scss .my_button { @include button-variant(HOW TO SET TEXT COLOR TO WHITE?); } _buttons.scss @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%),

问题 I want my website users to be able to print pages in either portrait or landscape mode. When printing from Google Chrome using Bootstrap 3.3.7, the Chrome print settings has a Layout option. Simply changing the css/js to 4.0.0, the Chrome print settings no longer has the Layout option. I suspect this has something to do with one of these CSS directives: @page @media 回答1: I was able to fix this by adding this CSS: @page { size: auto; } 来源： https://stackoverflow.com/questions/49018636/bootstrap

问题 I would like to know how I can vertically center align text and pictures to create a website section like this: I want align the logos and the text on the company names that are on the left of that picture. I would like to center the logos to the text next to it and their description. HTML: <div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=v3Fie3AFMrA"> <div class="overlay subSection container-fluid"> <div class="row justify-content-center"> <div class="overlay-cell

问题 I have a deck of cards in my Bootstrap 4 page. I want to align these button to have a nicer look. How can we do that? Here is an image: And here is the demo : http://7freres.com/new The table dosen't seem to works, as they are separated. Thanls 回答1: You can make all the card-text elements to have the same height. One way to do it can be through javascript. Write a function like this: document.addEventListener("DOMContentLoaded", function(event) { adjustCardTextHeights(); }); function

问题 I have made a simple chat UI using bootstrap 4 cards, I need a way to fix the message input to the bottom and to scroll the conversation automatically when the height of the window is filled by the sent and incoming messages. I've tried to fix the message input using a fixed position with the bottom set to 0 but the input then will take all the window width and this isn't what I want. Also for the text messages, I've tried to scroll the window using jQuery but it will not work and I need to

问题 Trying to render dynamically buttons and place 3 buttons in each row but they appear on the screen all in a separate row? <div class="row"> <div class="container sports-container col-md-12"> @foreach (var sport in Model.Aggregator.SportsRepository.List().Where(x => x.ParentSportId == null)) { <div class="col-md-4"> <a class="btn btn-outline-info">@sport.Description</a> </div> } </div> <style> .sports-container { background-color: whitesmoke; margin-top: 20px; } </style> 回答1: From the

问题 Trying to render dynamically buttons and place 3 buttons in each row but they appear on the screen all in a separate row? <div class="row"> <div class="container sports-container col-md-12"> @foreach (var sport in Model.Aggregator.SportsRepository.List().Where(x => x.ParentSportId == null)) { <div class="col-md-4"> <a class="btn btn-outline-info">@sport.Description</a> </div> } </div> <style> .sports-container { background-color: whitesmoke; margin-top: 20px; } </style> 回答1: From the

问题 I am displaying recent posts on my home page which are displaying on my WordPress website. Now I have to display records in the bootstrap column like the below image. Explanation of the image: 1) The first four rows will display col 12. 2) Then I have to divide columns 8 and 4. 3) In column 8 I have to display the reset of my records in col 6-6. 4) In column 4 I have to display some static text which is not coming from the database. So my HTML code will display like this. <div class=

问题 We are working on an MVP in vue.js and we decided to use bootstrap to have the element styled in a consistent way. Now we are starting to add the skin/theme to our single-page app, and we found an issue with the css rendered on the page. We successfully managed to override the styles by using higher specificity css selectors, but we would like to optimise the output code rendered in the browser by removing the unused "base" bootstrap css code. The question: How can we setup our environment to

问题 I am making a side bar menu with collapse show/hide. With my current css the collapse is not smooth and it seems force full or looks some weird. I wanted a slide with smooth transition when the item is being closed. But here in my case what's happening is when some item is already open and next item is clicked(for open). There it looks like toggle is being forcefully and it does not seems smooth collapsing of the list. What could be the better approach for this please suggest some better ways