为什么我的按钮和相邻的div之间有余量?

时间:2017-09-25 07:21:17

标签: html css bootstrap-4

我有以下HTML,我想知道为什么我的“等于”按钮和相邻按钮(3和。)之间存在差距

<div class="row">
  <div class="col-md-9">
    <div class="row">
      <button class="col-md-4">1</button>
      <button class="col-md-4">2</button>
      <button class="col-md-4">3</button>
    </div>
    <div class="row">
      <button class="col-md-8">0</button>
      <button class="col-md-4">.</button>
    </div>
  </div>
  <div class="col-md-3">
     <button class="col-md-12" id="equal">=</button>
      <br/>
  </div>
</div>

screen shot of described margin

4 个答案:

答案 0 :(得分:1)

解决方案1:

&#13;
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-xs-9">
    <div class="row">
      <button class="col-xs-4">1</button>
      <button class="col-xs-4">2</button>
      <button class="col-xs-4">3</button>
    </div>
    <div class="row">
      <button class="col-xs-8">0</button>
      <button class="col-xs-4">.</button>
    </div>
  </div>
  <button class="col-xs-1" id="equal">=</button>
      <br/>
</div>
&#13;
&#13;
&#13;

你得到了一个差距,因为bootstrap列的填充量为15px。因此,我对您的代码进行了一些更改,并删除了带有=符号的按钮的父div包装器,并为其添加了col-xs-1类。如果您愿意,可以添加col-xs-3

请注意,我还将所有类从col-md-更改为col-xs-,这完全是可选的。你可以保留它md。我添加了xs,以便在预览屏幕上看到结果。

解决方案2:

&#13;
&#13;
.equal-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-xs-9">
    <div class="row">
      <button class="col-xs-4">1</button>
      <button class="col-xs-4">2</button>
      <button class="col-xs-4">3</button>
    </div>
    <div class="row">
      <button class="col-xs-8">0</button>
      <button class="col-xs-4">.</button>
    </div>
  </div>
  <div class="col-xs-3 equal-wrapper">
     <button class="col-xs-12" id="equal">=</button>
      <br/>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

只需将按钮放在中,默认情况下,bootstrap列都有填充。

&#13;
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row calculator">
  <div class="col-md-9">
    <div class="row">
      <button class="col-md-4">1</button>
      <button class="col-md-4">2</button>
      <button class="col-md-4">3</button>
    </div>
    <div class="row">
      <button class="col-md-8">0</button>
      <button class="col-md-4">.</button>
    </div>
  </div>
  <div class="col-md-3">
    <div class="row">
      <button class="col-md-12" id="equal">=</button>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

注意:以全屏模式检查上述示例。

答案 2 :(得分:0)

HTML

添加课程 match {class:User, where:(name='Sean')} -IN_GROUP-> {class:Group} -HAS_ROLE-> {} -INHERITS-> {class:Role, as:role, while:(true)} return role.name

calculator

CSS: 删除填充。

<div class="row calculator">
  <div class="col-md-9">
    <div class="row">
      <button class="col-md-4">1</button>
      <button class="col-md-4">2</button>
      <button class="col-md-4">3</button>
    </div>
    <div class="row">
      <button class="col-md-8">0</button>
      <button class="col-md-4">.</button>
    </div>
  </div>
  <div class="col-md-3">
     <button class="col-md-12" id="equal">=</button>
      <br/>
  </div>
</div>

答案 3 :(得分:0)

您错过了在行类中包含按钮标记,如下面的代码

<div class="row">
<div class="col-md-9">
    <div class="row">
      <button class="col-md-4">1</button>
        <button class="col-md-4">2</button>
        <button class="col-md-4">3</button>
    </div>
    <div class="row">
        <button class="col-md-8">0</button>
        <button class="col-md-4">.</button>
    </div>
</div>
<div class="col-md-3">
    <div class="row">
        <button class="col-md-12" id="equal">=</button>
        <br/>
    </div>
</div>