Position Bootstrap-Taste richtig

Question

Ich versuche, eine Bootstrap-Stil-Dropdown-Taste für die Verwendung mit einer Tabelle zu positionieren. Ich kann es so bekommen, dass die Containerreihen aufschlagen, aber dann gibt es eine visuelle Lücke zwischen dem Knopf und der Tischkante. Ich versuche diese Lücke zu verkleinern (auf vielleicht 3 px?).

Ich habe mit absoluter und relativer Positionierung verwirrt, aber aus irgendeinem Grund bekommt mein Gehirn es einfach nicht.

ich schnell diese Geige zusammen zu helfen, was gezeigt ich meine: 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> 

jemand mich in der richtigen Richtung schubsen kann, wie man die Taste so positionieren, dass es direkt über dem Tisch ist (und nicht eine Lücke haben)?

Answer 1

nur border-radius ändern: 0 in der Taste

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

Answer 2

ich Ihre html nur ein kleines bisschen verändert. Ich habe den Knopf direkt über dem Tisch bewegt. Ich habe auch 1 Regel hinzugefügt, um die Schaltfläche zu verschieben.

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