Question

我试图定位一个Bootstrap样式的下拉按钮，用于表格。我可以得到它，使容器行对接，但是按钮和表边缘之间存在视觉上的差距。我试图缩小这个差距（可能是3 px？）。

我对绝对和相对的定位感到困惑，但出于某种原因，我的大脑还没有得到它。

我快速拼凑这个小提琴来帮助表明我的意思：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

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

sgd_abc_app_a

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

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

Answer 2

我修改了你的html一点点。我把按钮放在桌子上方。我还添加了1条规则来移动按钮。

＆＃13;

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

＆＃13;

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

＆＃13;

正确定位Bootstrap按钮

2 个答案: