twitter-bootstrap-4

Bootstrap v4 - responsive text

由 落花浮王杯 提交于 2019-12-20 07:24:29
问题 How to use responsive text in bootstrap v4? I tried: @include media-breakpoint-up(sm) { .resp-text { font-size: 16px; } } @include media-breakpoint-up(lg) { .resp-text { font-size: 28px; } } but not working. 回答1: there could be multiple reasons ensure that you are using SASS with SASS Compiler if not then use normal media queries https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints if you are using SASS then ensure you have imported the correct mixins file to your core

Bootstrap 4 square grid

由 让人想犯罪 __ 提交于 2019-12-20 03:18:00
问题 I want to create a responsive grid of squares with Bootstrap 4, to do so, I'm doing something like this (One row): <div class="container"> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> </div> And I'm setting the col class to have the following rule: .col { padding-top: 100%; } But that only creates a row with each column of the height of the viewport. This solution used to work before, but I

Bootstrap 4 navbar dropdown menu item not clickable on mobile devices

由 最后都变了- 提交于 2019-12-20 01:09:58
问题 I've got a website being developed with Bootstrap 4. When viewing from a mobile device and the menu items have collapsed to the 3 bars, the menu items are not clickable. I've tried implementing it the way the bootstrap docs suggest, but it's still not working. I've tried some other tweaks to no avail. What am I doing wrong here (other than using the alpha version)? Here's the site where you can test it: http://www.wrestlestat.com Keep in mind, if you just resize your browser from a desktop to

Bootstrap v4 Navbar bug?

由 自作多情 提交于 2019-12-19 08:14:44
问题 Here is the problem. I took default navbar example from bootstrap side(https://v4-alpha.getbootstrap.com/components/navbar/). They show full size navbar in result, that can collapse, when screen gets smaller. But when I've inserted the code into my project, it shows this: https://ibb.co/fjBNhQ As you can see it is always collapsed. I tried a lot of other examples, but nothing workes. Here is the code: <!DOCTYPE html> <html> <head> <title>Test area</title> <link rel="stylesheet" href="media

Multiple rows inside a row with Bootstrap 4

由 时光毁灭记忆、已成空白 提交于 2019-12-19 07:39:07
问题 I'm trying to create a full width page using Bootstrap. I have a setup similar to this: <body> <div class="container-fluid"> <div class="row"> The first row goes here </div> <div class="row"> The second row goes here </div> <div class="row"> The third row goes here </div> </div> </body> If I wanted to create a row inside a row, how would I do that? This is what I am trying to achieve: <body> <div class="container-fluid"> <div class="row"> <div class="row text-center"> <h1>Some title</h1> <

Angular UI modal with Bootstrap 4

由 懵懂的女人 提交于 2019-12-19 05:23:55
问题 Bootstrap 3 modal works fine: https://jsfiddle.net/qLy7gk3f/4/ But Bootstrap 4 modal doesn't: https://jsfiddle.net/qLy7gk3f/3/ The code is identical: $scope.click = function() { $uibModal.open({ templateUrl: "modal.html", controller: "modal", scope: $scope }); } How can I get AngularUI modals to work with Bootstrap 4? 回答1: I think it's just a case of adding the .in classes, specifically: .fade.in { opacity: 1; } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -o-transform:

Missing col-xs sizes using bootstrap 4 [duplicate]

由 主宰稳场 提交于 2019-12-18 04:55:12
问题 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 ..

Bootstrap 4 responsive button size

由 徘徊边缘 提交于 2019-12-18 04:48:10
问题 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); } }

Bootstrap 4 hidden-X-(down/up) class not working

由 荒凉一梦 提交于 2019-12-17 20:34:32
问题 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

Different behavior of flexbox with (overflow-y) scroll on Safari, Firefox and Edge VS Chrome

由 删除回忆录丶 提交于 2019-12-17 20:18:16
问题 In this page on plunker (https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview) there is a weird problem. On Chrome on Windows and Android (Canary also) everything works good. I can scroll the two areas (on the left and on the right) and the top and bottom div of the page are on the top and on the bottom of my device screen. I see them anytime (see the picture below). On iPad or iPhone, iOS, with Safari or Chrome, this is not what I get. And also on Firefox 47.0.1 on Windows. The page is long
订阅 twitter-bootstrap-4