bootstrap-4

Bootstrap 4 - Navbar items outside the collapse

♀尐吖头ヾ 提交于 2019-12-17 06:17:12
问题 Ok so I have to admit this is something I have always struggled with getting to work correctly even in BS3. But I want to have navbar links outside of the collapsed container that stay persistent. This is what I have right now: <nav class="navbar fixed-top navbar-expand-lg navbar-template"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"> <span class="navbar-toggler-icon"></span> </button> <div

Bootstrap columns stacking vertically on mobile device

拈花ヽ惹草 提交于 2019-12-17 05:14:33
问题 I have a simple bootstrap grid layout. I do not want the columns to stack vertically even on small devices. <div class="container"> <div class="row"> <div class="col-sm-4 col-xs-4 col-md-4">1</div> <div class="col-sm-4 col-xs-4 col-md-4">2</div> <div class="col-sm-4 col-xs-4 col-md-4">3</div> </div> 回答1: The columns are stacking vertically because you're using Bootstrap 4 , and the -xs- infix is no longer used. Just use col-4 .. <div class="container border-show center-div"> <div class="row">

Bootstrap 4 Change Hamburger Toggler Color

本小妞迷上赌 提交于 2019-12-17 04:47:01
问题 I have a bootstrap website where the Hamburger is added when the screen is less than 992px. The HamBurger code is like so <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> Is there any possibility to change the color of the HamBurger button? 回答1: The navbar-toggler-icon

Bootstrap 4 navbar collapse not working

穿精又带淫゛_ 提交于 2019-12-17 04:33:10
问题 I am trying to implement a Navbar using Bootstrap 4. Currently, the Navbar correctly collapses when the viewport is shrunk to mobile size. However, when attempting to toggle menu, nothing happens. The jsFiddle example demonstrates this behavior. I have attached the HTML as well. Steps I have taken: Removing all custom CSS Ensuring jQuery link is before Bootstrap JS file Script tags in the header and the footer Copy and paste exact examples from Bootstrap Docs (and I get the same behavior)

How to hide collapsible Bootstrap 4 navbar on click

痞子三分冷 提交于 2019-12-17 04:23:48
问题 I've created this collapsable navbar using Bootstrap 4 that works nicely, but I would like it to close when the user clicks on a link. Any way to do this? Thanks html navbar: <nav class="navbar navbar-toggleable-md fixed-top"> <button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"><

How to hide collapsible Bootstrap 4 navbar on click

烂漫一生 提交于 2019-12-17 04:23:02
问题 I've created this collapsable navbar using Bootstrap 4 that works nicely, but I would like it to close when the user clicks on a link. Any way to do this? Thanks html navbar: <nav class="navbar navbar-toggleable-md fixed-top"> <button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"><

bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]

不羁的心 提交于 2019-12-17 03:44:06
问题 This question already has an answer here : Bootstrap 4.0 Grid System Layout not working (1 answer) Closed last year . im migrating to bootstrap 4 however Ive swapped the boostrap-min.css for my pages from 3 to 4 and my columns are all now vertically aligned as as far as I can see the columns are correct. I also used a JS fiddle to test and am able to repliate them all being vertical there too. can anyone point me in the right direction, from how ive read the documentation https://getbootstrap

Table column sizing

风流意气都作罢 提交于 2019-12-17 03:35:10
问题 In Bootstrap 3 , I could apply col-sm-xx to the th tags in the thead and resize table columns at will. However this doesn't work in bootstrap 4. How can I achieve something like this in bootstrap 4? <thead> <th class="col-sm-3">3 columns wide</th> <th class="col-sm-5">5 columns wide</th> <th class="col-sm-4">4 columns wide</th> </thead> Looking at the codeply provided it doesn't size properly, especially if you add some data to the table. See how this runs: <div class="container" style=

Disable responsive navbar in bootstrap 4

寵の児 提交于 2019-12-17 03:18:50
问题 is there a way to disable the responsive navBar in bootstrap 4? I don't want the dropdown as in the mobile version it's still possible to see the 2 links next to the brand. As a plus, I'd like to know if it's possible to put the links to the right in the bar. Pull-xs-right doesn't seem to work correctly. My current code looks like this: <nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded"> <a href="/" class="navbar-brand">PIM</a> <ul class="nav navbar-nav pull-xs

Remove gutter space for a specific div only

徘徊边缘 提交于 2019-12-17 03:01:10
问题 The default Bootstrap grid system utilizes 12 columns with each span having 30px gutter as below. Gutters are the white space between columns. Gutter width seems to be between 20px - 30px . Let's assume it's 30px here. I want to remove the gutter space for a specific div , so that there will be no gutter space in the row. Each span will be next to each other with no gutter. The problem is if I remove the margin 30px (gutter) it leaves 360px (12 * 30px ) at the end of the row. Given that I