Question

我正在尝试连续放置5个按钮。如果我使用“col-lg-3”布局变得太大，如果我尝试使用col-lg-2我的第五个按钮正在收尾。怎么避免呢？在这种情况下处理对齐问题的最佳方法是什么？如果你得到更多的数字你会得到更多的空间，如果你降低col-lg-xx中的数字你会得到更少的空间？以下是代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calculator</title>
<link href="Content/theme/bootstrap-theme-slate.min.css" rel="stylesheet" />
<style>
    #calculator{
    border:2px solid red ;
    margin-top:5%;
    }
</style>
</head>
<body>
<div id="container">
    <div class="row">
            <div id="calculator" class="col-lg-3 col-lg-offset-3">
                 <div class="row">
                     <input class="form-control" type="text" name="result" value="" />
                 </div>
                 <div class="row">
                     <button type="button" class="btn btn-default">MC</button>
                     <button type="button" class="btn btn-default">MR</button>
                     <button type="button" class="btn btn-default">MS</button>
                     <button type="button" class="btn btn-default">M+</button>
                     <button type="button" class="btn btn-default">M-</button>
                 </div>
            </div>
    </div>

 </div>
</body>
</html>

Answer 1

由于您已在按钮容器上添加了.row类，因此请在按钮上使用.col-xx类，以获得完整的控制按钮网格：

<div id="container">
  <div class="row">
    <div id="calculator" class="col-lg-3 col-lg-offset-3">
      <div class="row">
        <input class="form-control" type="text" name="result" value="" />
      </div>
      <div class="row">
        <button type="button" class="col-lg-2 col-lg-offset-1 btn btn-default">MC</button>
        <button type="button" class="col-lg-2 btn btn-default">MR</button>
        <button type="button" class="col-lg-2 btn btn-default">MS</button>
        <button type="button" class="col-lg-2 btn btn-default">M+</button>
        <button type="button" class="col-lg-2 btn btn-default">M-</button>
      </div>
    </div>
  </div>
</div>

Bootstrap 3按钮水平对齐问题连续出现

1 个答案: