我正在使用 bootstrap 编写一些代码。我正在尝试使按钮居中的底部导航栏。我在网上找到的选项涉及设置特定宽度，这搞砸了我的响应式设计。使内容居中的最佳方式是什么？
提前致谢!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand Logo</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li><a href="/">Home</a>
</li>
<li><a href="/products">Products</a>
</li>
<li><a href="/about-us">About Us</a>
</li>
<li><a href="/contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="jumbotron text-center under">
<div class="transparent vert-center">
<h1 id="heading-title">Website Heading</h1>
<p id="heading-desc">Information about the website!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center outline">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center outline">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass size"></span>
</div>
<div class="col-sm-4 text-center outline">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus size"></span>
</div>
</div>
</div>
<nav role="navigation" class="navbar navbar-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 text-center">
<h3 class="footer-heading">Footer Title</h3>
<button type="button" class="btn-success btn-format">Click</button>
<button type="button" class="btn-success btn-format">Click</button>
</div>
<div class="col-sm-4 text-center outline">
<h3 class="footer-heading">Footer Title</h3>
<button type="button" class="btn-success btn-format">Click</button>
<button type="button" class="btn-success btn-format">Click</button>
</div>
<div class="col-sm-4 text-center">
<h3 class="footer-heading">Footer Title</h3>
<button type="button" class="btn-success btn-format">Click</button>
<button type="button" class="btn-success btn-format">Click</button>
</div>
</div>
</div>
</nav>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
/* Top nav syling */
.navbar-default{
background-color: rgb(54, 135, 2);
font-size: 120%;
}
/*Main display styling */
.jumbotron{
height: 400px;
background: url("../images/bg.jpg");
background-size: cover;
background-position: 50% 50%;
width: 96%;
border-bottom: 5px solid rgb(79, 201, 2);
border-top: 5px solid rgb(79, 201,2);
border-radius: 5px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
/*Navbar font coloring */
.nav.navbar-nav li a {
color: white;
}
/* Centers content vertically */
.vert-center{
position: relative;
top: 50%;
transform: translateY(-50%);
}
/*Styles partially transparent background within jumbotron class */
.transparent{
background: rgba(190, 200, 216,.5);
display: inline-block;
padding-left: 20px;
padding-right: 20px;
border-radius: 5px;
border-left: 4px solid rgb(79, 201, 2);
border-right: 4px solid rgb(79, 201, 2);
width: 60%;
}
/*Padding around desc within jumbotron */
#heading-desc {
padding-top: 15px;
padding-bottom: 15px;
}
/*Padding around title within jumbotron */
#heading-title{
padding-top: 15px;
}
/* Bootstrap menu created using bootstrapdesigntools.com */
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 16px;
background-color: rgba(54, 135, 2, 1);
background: -webkit-linear-gradient(top, rgba(47, 196, 116, 1) 0%, rgba(54, 135, 2, 1) 100%);
background: linear-gradient(to bottom, rgba(47, 196, 116, 1) 0%, rgba(54, 135, 2, 1) 100%);
border-width: 1px;
border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
color: rgba(255, 255, 255, 1);
background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(90, 224, 4, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(68, 168, 5, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #44a805;
}
/*Styling of icons */
.size{
font-size: 60px;
padding-top: 15px;
}
/*Outline surrounding three columns including icons */
.outline {
border-left: 2px solid rgb(79, 201, 2);
border-right: 2px solid rgb(79, 201, 2);
}
.navbar-bottom {
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(201, 199, 199, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(201, 199, 199, 1) 100%);
margin: 0;
padding-top: 2px;
margin-top: 90px;
}
.btn-format {
display: block;
width: 100px;
padding-top: 2px;
padding-bottom: 3px;
margin-top: 7px;
margin-bottom: 5px;
left: 50%;
height: 9%;
}
.horizontal-center{
margin: 0 auto;
width: 100px;
}
}
.footer-heading {
font-size: 15px;
font-weight: bold;
}
footer-title-pad {
padding-top: 2px;
}
/* Unsure: Guessing- targeting id custom-bootstrap-menu class navbar-default, and class navbar-brand.
What does the space between ".navbar-default and .navbar represent instead of linking them as with
"custom-bootstrap-menu.navbar"*/
#custom-bootstrap-menu.navbar-default .navbar-brand {
/* sets font-color for the menubar and brand */
color: rgba(255, 255, 255, 1);
}
/*Unsure: Guessing- targeting id custom-bootstrap menu and class navbar-default */
#custom-bootstrap-menu.navbar-default {
/*sets font size for font within navbar... brand too? */
font-size: 15px;
/*Possibly a fallback for browsers that do not support gradients*/
background-color: rgba(47, 196, 116, 1);
/*Gradient for main coloring of menubar */
background: -webkit-linear-gradient(top, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
background: linear-gradient(to bottom, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
/*Sets border width and rounds edges slightly */
border-width: 1px;
border-radius: 4px;
}
/*Unsure: Guessing-Targets #custom-bootstrap-menu id, navbar-default class and .navb-nav class
and all links within lists */
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
/*Sets text color of white to list items with links inside? */
color: rgba(255, 255, 255, 1);
/*Really confused what this does for the menubar. Fully transparent white background-color? */
background-color: rgba(248, 248, 248, 0);
}
/*When two tags are included like this does the rule simply apply to both?*/
/*Unsure: guessing-targets id custom-bootstra-menu and class navbar-nav's liste
items with links when the user hovers? */
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
/*Targets the same as above, but upon focus. I have some experience with focus from javascript but
could use a more clear understanding. My rough understanding is it is while an element is in use */
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
/*Sets color of text when hover/focus occurs? */
color: rgba(255, 255, 255, 1);
/*Green background color- unsure what it's doing exactly*/
background-color: rgba(68, 229, 74, 1);
}
/*Unsure: guessing- Targets id custom-bootstrap-menu, class navbar-default and all
links within an element with the class active? */
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
/*Unsure: guessing-Targets same as previous and styles the link color and background color of something on hover on hover */
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
/*Unsure: guessing-Targets same as above and styles link color and background color of something on focus */
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
/*Font color of white */
color: rgba(255, 255, 255, 1);
/*Background color- not sure for what. Fallback for older browsers potentially */
background-color: rgba(66, 165, 3, 1);
/*Gradient- not sure what it's styling */
background: -webkit-linear-gradient(top, rgba(54, 135, 2, 1) 0%, rgba(66, 165, 3, 1) 100%);
background: linear-gradient(to bottom, rgba(54, 135, 2, 1) 0%, rgba(66, 165, 3, 1) 100%);
}
/*Unsure: Guessing-targets id custom-bootstrap-menu class navbar-default and navbar-toggle
does navbar-toggle change the display once the screen has been resized? */
#custom-bootstrap-menu.navbar-default .navbar-toggle {
/*border color */
border-color: #42a503;
}
/*Unsure: Guessing-targets id custom-bootstrap-menu class navbar-default and navbar-toggle on focus and hover */
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
/*Sets the background color- not sure on what */
background-color: #42a503;
}
/*targets id custom-bootstrap-menu class navbar-default and navbar-toggle and icon icon-bar.
Possibly styles something on screen resize?*/
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
/*setting the background color- not sure of what*/
background-color: #42a503;
}
/*Targets id custum-boostrap-menu class navbar default and navbar-toggle on hover/focus and class icon bar
does this target the color of the background once the screen is resized and the user hovers/focuses*/
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
/*background color- not sure of what */
background-color: #2fc474;
}
.btn-center{
}
忽略 CSS 注释
最佳答案
由于它们是 block 元素，您可以使用 margin:auto; 将它们居中
.navbar-bottom button {
margin: auto;
}
关于html - Bootstrap : Responsively Centering Buttons within Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42990551/