如您所见，从按钮到文本输入的所有行都位于右侧，占据了 12 列中的前 8 列(假设我为每一行指定了 8 行)。我希望能够为每一行占据第 3-10 列。谢谢:)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href='css/calculator.css' type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<h1 class="text-center">Calculator</h1>
<div id="calculator">
<div class="row row-centered">
<h6 class="text-center">Sandstein Incorporated</h6>
</div class="row row-centered">
<div class="row row-centered">
<input type="text" class="col-md-12" id="input" value='0'/>
</div>
<div id="innerCalc">
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">AC</button>
<button class="col-md-2 btn btn-primary">CE</button>
<button class="col-md-2 btn btn-primary">%</button>
<button class="col-md-2 btn btn-primary">/</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">7</button>
<button class="col-md-2 btn btn-primary">8</button>
<button class="col-md-2 btn btn-primary">9</button>
<button class="col-md-2 btn btn-primary">*</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">4</button>
<button class="col-md-2 btn btn-primary">5</button>
<button class="col-md-2 btn btn-primary">6</button>
<button class="col-md-2 btn btn-primary">-</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">1</button>
<button class="col-md-2 btn btn-primary">2</button>
<button class="col-md-2 btn btn-primary">3</button>
<button class="col-md-2 btn btn-primary">+</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">.</button>
<button class="col-md-2 btn btn-primary">0</button>
<button class="col-md-2 btn btn-primary">Ans</button>
<button class="col-md-2 btn btn-primary">=</button>
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
body{
background-color:#4099FF;
}
#calculator{
border-radius: 5%;
background-color: rgba(250, 250, 250, .7);
width: 40%;
margin:auto;
padding-left: 1%;
padding-right: 1%;
height:230px;
}
#input{
margin:auto;
text-align:right;
width: 70%;
}
button{
font-size: 2.0em;
margin:1px;
}
#innerCalc{
text-align: center;
}
最佳答案
我们可以使用 Bootstrap 偏移列来对齐。
引用> http://getbootstrap.com/css/#grid-offsetting
删除下面的CSS:
#input{
margin:auto;
text-align:right;
width: 70%;
}
然后像下面这样修改输入类:
<input type="text" class="col-md-8 col-md-offset-2" id="input" value='0'/>
在每一行的第一个 child 中添加 col-md-offset-2 类:
<button class="col-md-2 col-md-offset-2 btn btn-primary">AC</button>
<button class="col-md-2 col-md-offset-2 btn btn-primary">7</button>
....
试试下面的代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href='css/calculator.css' type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body{
background-color:#4099FF;
}
#calculator{
border-radius: 5%;
background-color: rgba(250, 250, 250, .7);
width: 40%;
margin:auto;
padding-left: 1%;
padding-right: 1%;
height:230px;
}
button{
font-size: 2.0em;
margin:1px;
}
#innerCalc{
text-align: center;
}
</style>
</head>
<body>
<h1 class="text-center">Calculator</h1>
<div id="calculator">
<div class="row">
<h6 class="text-center">Sandstein Incorporated</h6>
</div class="row">
<div class="row">
<input type="text" class="col-md-8 col-md-offset-2" id="input" value='0'/>
</div>
<div id="innerCalc">
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">AC</button>
<button class="col-md-2 btn btn-primary">CE</button>
<button class="col-md-2 btn btn-primary">%</button>
<button class="col-md-2 btn btn-primary">/</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">7</button>
<button class="col-md-2 btn btn-primary">8</button>
<button class="col-md-2 btn btn-primary">9</button>
<button class="col-md-2 btn btn-primary">*</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">4</button>
<button class="col-md-2 btn btn-primary">5</button>
<button class="col-md-2 btn btn-primary">6</button>
<button class="col-md-2 btn btn-primary">-</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">1</button>
<button class="col-md-2 btn btn-primary">2</button>
<button class="col-md-2 btn btn-primary">3</button>
<button class="col-md-2 btn btn-primary">+</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">.</button>
<button class="col-md-2 btn btn-primary">0</button>
<button class="col-md-2 btn btn-primary">Ans</button>
<button class="col-md-2 btn btn-primary">=</button>
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
关于html - 如何使用 bootstrap 将我的行居中。我试过其他解决方案无济于事，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35122691/