twitter-bootstrap-4

问题 I've built a standard layout with a sidebar using Bootstrap's grid system (EDIT: I'm using Bootstrap 4 but could still switch). It looks like this: <div class="row"> <div class="col-md-3"> ... </div> <div class="col-md-9"> <div class="row"> <div class="col-md-4">...</div> <div class="col-md-4">...</div> <div class="col-md-4">...</div> </div> </div> </div> On mobile, the red area would be above the green one. I need to be able to switch between them in a way that is more convenient than

问题 The below code worked perfectly fine for me using Bootstrap version 3. However, since upgrading to Bootstrap 4 Beta2 the fade transition does not work. It just jumps to the next image rather than a smooth transition: HTML <div id="carousel1" class="carousel fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel1" data-slide-to="0" class="active"></li> <li data-target="#carousel1" data-slide-to="1"></li> <li data-target="#carousel1" data-slide-to="2"></li> </ol

问题 I have several blocks in my page. I use bootstrap 4 alpha 6 version. I want expand/collapse these blocks by clicking one button. Right know I use next js code and it only open all blocks but how to close them?! How to fix this problem? HTML: <div class="card"> <div class="card-header"> <button id='expand-collapse' type="button" data-parent="#blocks" data-toggle="collapse" data-target=".block" aria-expanded="false" aria-controls=".block"> </button> </div> <div class="card-block"> <div id=

问题 How do you push to the right nav items of a Bootstrap 4 navbar? I tried float-*-right but did not work. <nav class="navbar navbar-static-top navbar-dark bg-inverse float-*-right"> <a class="navbar-brand" href="#">Project name</a> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact<

问题 Navbars load collapsed and improperly formatted using downloaded Bootstrap 4 Alpha code, but appear fine using the Bootstrap 4 Alpha CDN. Using the downloaded code is necessary for this project. Navbar appearance using downloaded Bootstrap 4 Alpha code: View image Navbar appearance using Bootstrap 4 Alpha CDN (the look I want): View image This is my HTML, it doesn't change: <nav class="navbar navbar-expand-lg navbar-light"> <div class="container"> <a class="navbar-brand" href="#">Brand</a>

问题 I put a select in a dropdown in bootstrap v4. It works fine on desktop; however, on mobile the select options won't show. Everything I try seems to leave desktop working and mobile not. Help greatly appreciated. Thanks. <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> <span class="dropdown

问题 The following code successfully dynamically loads the "remote" page (data-remote="/booking-app-1") within the modal-body. However, this target page just contains a < script > which loads an IFrame (for an external payment application). This script does not execute. Is there a way to fix this, or a better way to just inject the booking applications's script via its URL directly into the modal-body? I've also tried swapping the data-remote URL to my page with the URL direct to the booking app's

问题 I'm using Rails 4.2.4 with Bootstrap 4 (using the bootstrap_ruby gem). Simple Form adds input type classes to the form... if the input is a string it will add a class string to the input. I wanted to know how to stop this from happening? For example, if I had a form with a file input. simple_form_for @attachment do |f| f.input_field :file, as: :file end It will produce the following HTML: <form> ... <div class="form-group file optional photo_image"> <label class="file optional control-label"

问题 I've been trying to get Sass up and running with Bootstrap. I've followed the tutorial, going so far as to install exact versions of the dependencies listed rather than the default/latest versions. I've done this from scratch at least three times. I've uninstalled and reinstalled different versions of Sass and Compass (mainly according to Sass --compass --watch Error: Cannot load compass), as well as older versions of Ruby (I just installed 2.3.3, down from the latest release). But whenever I

问题 I've started to use the new alpha4 6 and just checked, what changed. As I see, I can use containers, rows, columns as in 3. So I've just set up a really simple layout, a content > row > col (want to use as container to add my extra setup), a row in it and two columns. The result is terrible: https://jsfiddle.net/34prcdou/1/ I read that they changed the floats to flexbox, that's ok, I know flexbox, but this result is shocked me. This is a valid bootsrap layout I think. What do I miss? Maybe I