bootstrap-4

问题 Hi I want to disable the navbar collapse in Bootstrap 4. And it would be nice if the navbar takes the whole width but inside the navbar the container class only allows the default width to place content. I've tried this Disable responsive navbar in bootstrap 4 but thats not working with the container in it. But thats not working. <nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row"> <div class="container"> <a href="/" class="navbar-brand">PIM</a> <ul class=

问题 I am not able to align the dropdown to the center of the parent on which the dropdown is opened with hover. I have tried to text-align: center for the entire .nav .navbar li elements, and it doesn't work. I have tried to set margin and left: 50% for the entire ul.dropdown-menu that is the dropdown and it doesn't work. Here is the html code: <ul class="nav navbar-nav navbar-right" id="headerDropdowns"> <li><div class="btn-toolbar"> <div class="btn-group"> <button class="btnCustom" data-toggle=

问题 In my simple design I use cards to show some products. However some product titles wrap 2 lines while others wrap only 1 line. I would like to have the body text vertically aligned (and the price buttons too).. <div class="container"> <div class="row"> <div class="col-12"> <div class="card-group"> <div class="card text-center" > <img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/1/4/7

问题 I'm trying to horizontally center an image in the carousel of Bootstrap 4 Alpha 6. It doesn't seem to work in any way I've tried, including using center-block . Here's what I've tried so far: http://codepen.io/anon/pen/wJdjQg?editors=1100 Any hints? 回答1: center-block has been replaced by mx-auto in Bootstrap 4. mx-auto represents auto x-axis margins (margin=left: auto; margin-right: auto) so it can be used to center display:block or display:flex elements. <div class="carousel-item active">

问题 I'm trying to get my nav links to float to the right of my navbar, but I can't get it to work. I've tried using the ".float-right", "float-xs-right", and "justify-content-end" bootstrap 4 class, along with using "float: right !important;" in my CSS file, and it still won't work. Here is the HTML for the navbar of my website: <div id="navbar" class="navbar navbar-fixed-top"> <div class="container"> <div class="row"> <div class="navbar-brand"> <img src="images/logo.png" width="88px"> Scervino

问题 Currently, I am have a (class="d-flex flex-column") containing a navbar and a container and this container contains a (class="d-flex flex-column") as well that contains two rows. I use flex-grow to make my container fill the page. I wish to make the second row in this nested container to fill its parent using flex-grow again but it doesn't work. How do I make a nested element grow to fill a parent that has been made made to fill the viewport height using flex-grow in Bootstrap v4? Should I

问题 Is there a way to collapse the the Bootstrap Collapse plugin from horizontally instead of vertically? Looking at the code this ability doesn't seem to be built in, but I'm hoping I'm just missing something... Any help will be greatly appreciated. Thanks! 回答1: I figured out how to do this very easily without modifying or adding any javascript. First you define the following CSS after all Twitter Bootstrap CSS: .collapse { height: auto; width: auto; } .collapse.height { position: relative;

问题 I found this example of how to make a responsive card deck using alpha 6 but it doesn't seem to work in the current beta 2. Does anybody know how to get it working in beta 2? What I need is a responsive card deck that looks like this. The images can have varying sizes, I have no control over that. I would like the image height fixed to 100 px and the images to resize without distortion. The body height should scale to the body text and the row should take the height of the largest cell. So

问题 I found this example of how to make a responsive card deck using alpha 6 but it doesn't seem to work in the current beta 2. Does anybody know how to get it working in beta 2? What I need is a responsive card deck that looks like this. The images can have varying sizes, I have no control over that. I would like the image height fixed to 100 px and the images to resize without distortion. The body height should scale to the body text and the row should take the height of the largest cell. So

问题 I am trying to implement Radio button uncheck on second click in Angular 2+ as done here in angularjs. I have an array of objects that get displayed using *ngFor, therefore I have multiple radio button groups in one form. I need an implementation that will onlt uncheck the said radio button/ All the implementations I have tried keep checking and unchecking multiple buttons while other implementations don't work at all. This is my current code right now. How can I implement Radio button