twitter-bootstrap-4

问题 I use Bootstrap 4. .top block should be 100% width and full screen height. .top-title should be in the middle of screen. .btn-scroll-down shold be down of the screen. I want my page looks like HTML <!-- top --> <div class="top js-top"> <div class="container h-100"> <div class="row h-100"> <div class="col-lg-12"> <h1 class="top-title"> <span class="top-title-1">text</span> <span class="top-title-2">title</span> <span class="top-title-3">text</span> </h1> <a href="" class="btn-redirect link-go

问题 I have a layout design clearly made for 1200px / 15 cols framework, but my client wants to use Bootstrap 4 with SASS only. Is it even possible to transform Bootstrap into 15 cols layout? I haven't seen such an example online. I'm not a huge fan of Bootstrap for small projects. It is a trend I honestly don't understand. Might be too heavy for a 5 pages website & projects are usually done according to the content, not according to some framework, Twitter-backed or not. But, this is it. If it

问题 So the following worked on 4.alpha but I am not having any luck figuring it out on 4.beta I am using a col-3 | col-6 | col-3 row layout. When the browser is medium (desktop) or larger I want that layout. When the browser is smaller than medium , I would like: The col-md-6 (#2) div to be at the top row The col-md-3 (#1) directly below it The col-md-3 (#3) on the very bottom row Here is the code that I had for 4.alpha that worked: <div class="container-fluid"> <div class="row"> <div class="col

问题 I'm using Bootstrap 4 alpha 6, and attempting to use flexbox to vertically center the content of equal height cards. I've used the h-100 util class to make the cards full height with the columns.. The problem is that I want the content of each card to be aligned in the middle (centered vertically). I tried the use the .align-items-center class in the row, which works to center the cards, but then the cards are no longer equal height... HTML <div class="container"> <div class="row align-items

问题 I have a row of thumbnails like this: I want them to be equal height though. This is my code: <div class="row text-center"> <div class="col-md-3 col-sm-6"> <div class="thumbnail"> <div class="caption"> <h3>HOTKEY + COMBO</h3> <p>Hotkey description goes here. Category only shown in explore.</p> <p> <a href="#" class="btn btn-default" data-tooltip="Change Hotkey"> </p> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="thumbnail"> <div class="caption"> <h3>HOTKEY + COMBO</h3> <p

问题 This question already has answers here : How to center cards in bootstrap 4? (2 answers) How to align an image dead center with bootstrap (15 answers) Centering the image in Bootstrap (3 answers) How can I center an image in Bootstrap? (3 answers) How do I center an image in Bootstrap? (2 answers) Closed 2 years ago . How do I center an image in a Bootstrap 4 card? It's a vertical image and it looks wrong being left-aligned. I've been reading the Bootstrap Card documentation and can't find

问题 I have a web page that uses the Bootstrap 4 beta. In this page, I have an inline list. I want the content of each list item to be vertically centered so the items line up. As shown in this Bootply, they're currently off-center. I'm using the following code: <ul class="list-inline text-center align-items-center"> <li class="list-inline-item"><h2>Hello</h2></li> <li class="list-inline-item"><button class="btn btn-info btn-sm">Help</button></li> </ul> My question is, how do I get the list items

问题 I have an Angular 4 application using angular-cli 1.0 and Bootstrap 4-alpha6. I want to customize Bootstrap 4. E.g. change the color of the primary buttons. It must be a future proof solution. That means my customizations must survive upgrades of bootstrap at a later point in time. I have integrated bootstrap by: Adding "bootstrap": "4.0.0-alpha.6", to the dependencies in my package.json file. Furthermore I added "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], to "apps"

问题 Edit : Visit https://jsfiddle.net/DTcHh/40740/ for the final solution! Update : This question is a followup! I have a div with an "add question" (Bootstrap) radio button. My intention is, that the div in which the button is placed should be copied and placed underneath when the mentioned button is clicked: How do I do that? Nothing happens when I click the button. js.fiddle HTML: <div id="singleQuestionModule"> <div class="question-wrapper"> <form class="form-group"> <div class="d-flex

问题 How do you hide and replace the navbar-toggler-icon in Bootstrap 4? Right now the code below just puts the 'X' below the hamburger menu. <nav class="navbar navbar-toggleable-md"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id=