Question

我有以下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

Answer 1

解决方案1：

＆＃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;

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

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

解决方案2：

＆＃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;

Answer 2

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

＆＃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;

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

Answer 3

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>

Answer 4

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

<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>

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

4 个答案: