正确定位 Bootstrap 按钮

Question

我正在尝试定位一个 Bootstrap 样式的下拉按钮以与表格一起使用。我可以得到它，以便容器行对接，但按钮和桌子边缘之间存在视觉间隙。我正在尝试缩小这个差距（可能是 3 像素？）。

我搞砸了绝对定位和相对定位，但由于某种原因，我的大脑无法理解。

我快速整理了这个小提琴来帮助说明我的意思：https://jsfiddle.net/rbennett/emup7wpe/1/

<div class="container">
  <div class="col-sm-12">
    Trying to figure out how to correctly position a button for a table...
    <br />
    <br />
    <div class="button-row">
      <button id="itemsButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Items<span class="caret"></span>
      </button>
      <ul id="itemSelectorDropdown" class="dropdown-menu">
        <li><a href="#">test1</a></li>
        <li><a href="#">test2</a></li>
        <li><a href="#">test3</a></li>
      </ul>
    </div>
    <br />
    <div class="other-row">
      <table id="testTable" class="table table-bordered" cellspacing="0">
      I have elements from a DatatTable table that sit right here<br />so I'm looking to position the "Items" button on the same line,<br />but aligned to the right.
        <thead>
          <tr>
            <th>Data1</th>
            <th>Data2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>xyz</td>
            <td>abc</td>
          </tr>
          <tr>
            <td>qrs</td>
            <td>123</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

有人可以按正确的方向推动我如何定位按钮，使其位于桌子正上方（并且没有间隙）吗？

Answer 1

我只是稍微修改了您的 html。我将按钮移到了桌子上方。 我还添加了 1 条规则来移动按钮。

.other-row {
  outline: 1px solid blue;
}

#itemsButton{
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-sm-12">
    Trying to figure out how to correclty position a button...
    <br />
    <br />
    <div class="button-row">

      <ul id="itemSelectorDropdown" class="dropdown-menu">
        <li><a href="#">test1</a></li>
        <li><a href="#">test2</a></li>
        <li><a href="#">test3</a></li>
      </ul>
    </div>
    <br />
    <div class="other-row">
    <button id="itemsButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Items<span class="caret"></span></button>
      <table id="testTable" class="table table-bordered" cellspacing="0">
        We want to see the "Items" button here (aligned to the right)     
        <thead>
          <tr>
            <th>Data1</th>
            <th>Data2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>xyz</td>
            <td>abc</td>
          </tr>
          <tr>
            <td>qrs</td>
            <td>123</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 2

只需更改按钮中的border-radius:0

#itemsButton
{border-radius:0;float:right;}

.other-row {
  outline: 1px solid blue;
}
#itemsButton
{border-radius:0; float:right}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-sm-12">
    Trying to figure out how to correclty position a button...
    <br />
    <br />
    <div class="other-row">
    <div class="button-row">
      <button id="itemsButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Items<span class="caret"></span>
      </button>
      <ul id="itemSelectorDropdown" class="dropdown-menu">
        <li><a href="#">test1</a></li>
        <li><a href="#">test2</a></li>
        <li><a href="#">test3</a></li>
      </ul>
    </div>
      <table id="testTable" class="table table-bordered" cellspacing="0">
  
        <thead>
          <tr>
            <th>Data1</th>
            <th>Data2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>xyz</td>
            <td>abc</td>
          </tr>
          <tr>
            <td>qrs</td>
            <td>123</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>