Question

正如您所看到的，从按钮到文本输入的所有行都在右边占据了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;
}

Answer 1

我们可以使用bootstrap Offsetting columns 来对齐。

参考＆gt; 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'/>

在每行的第一个孩子中添加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>

Answer 2

use this css...

<style>
.row
{
   width:80%;
   margin:0px auto;

}
</style>

Answer 3

如果您想使用3-10列的网格结构，@ Santosh的答案就可以了。

只是一个提示：但是，您用于构建网格的方法可以更好。换句话说，对于你的结构（计算器按钮来自3-10列），你可以将id="calculator"内的内容分成3列而不是行。第二个（中间）列可能包含按钮和输入框。

如何使用引导程序居中行。我尝试过其他解决方案无济于事

3 个答案: