Wie Bootstrap Paginierung in-line mit den Tasten

Siehe das Bild oben zu bewegen. Sie sind gut ausgerichtet, aber ich möchte die Seitennummerierung so verschieben, dass sie dazwischen liegt, um den Platz besser zu nutzen. Jetzt ist der Code für die Seitennummerierung weiter unten, aber wenn ich ihn zwischen die Dropdown-Menüs und Schaltflächen verschiebe, bewirkt das, was Sie im zweiten Bild sehen. Wie kann ich alles ausrichten?

Bootiply hier: http://www.bootply.com/5Ufnpj317Z

EDIT:

Quelle

2016-08-13 daninthemix

Anbei Bilder finden und tun Änderungen wie pro roten Bereich.

Quelle

2016-08-13 09:08:40

Das hat mir sehr geholfen - letzte, was ich mit der linken Dropdown-Listen (Ort und Typ) müssen mit der folgenden Tabelle auszurichten, und nicht so zwischen ihnen eine große Lücke zu haben: http://i.stack.imgur.com/5cn2T.png – daninthemix

Ich habe herausgefunden, wenn ich beide linken Dropdowns in einem div mit Col-md-2, sie sitzen gut zusammen. Aber wie kann ich sie dazu bringen, sich mit der untenstehenden Tabelle auszurichten? – daninthemix

Ich habe ein gutes Stück des Codes neu angeordnet, wie folgt zusammengefasst:

eingeführt Bootstrap-Container und Reihen
entfernt Panel-Körper Klasse
entfernt Pull-Rechts-Klasse von den Tasten das Recht
hinzugefügt test.css für einige individuelle Anpassungen
festen Einrücken

Es sieht ok aus, ein breiter Bildschirm, aber Elemente werden auf kleineren Bildschirmen übereinander gestapelt.

/*test.css*/ 
 
#dropdownMenu1-div{ 
 
    display:inline; 
 
} 
 

 
#dropdownMenu2-div{ 
 
    display:inline; 
 
} 
 

 
.pagination{ 
 
    margin:0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="bootstrap.css"> 
 
<link rel="stylesheet" href="test.css"> 
 
</head> 
 
<body> 
 

 
    <h2 class="text-center">Browse</h2> 
 
    <hr class="no-bottom-pad"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-xs-3"> 
 
        <div class="dropdown inline-control" id="dropdownMenu1-div""> 
 
         <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
         Location: 
 
         <span class="caret"></span> 
 
         </button> 
 
         <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> 
 
          <li><a href="browse.php?">all</a></li> 
 
          <li class="divider"></li> 
 
          <li><a href="browse.php?&amp;loc=3">London Waterloo</a></li> 
 
          <li><a href="browse.php?&amp;loc=2">London Waterloo 3F workshop</a></li> 
 
          <li><a href="browse.php?&amp;loc=1">London Waterloo comms room</a></li> 
 
         </ul> 
 
        </div> 
 
        <div class="dropdown inline-control" id="dropdownMenu2-div"> 
 
         <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
         Type: 
 
         <span class="caret"></span> 
 
         </button> 
 
         <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> 
 
          <li><a href="browse.php?">all</a></li> 
 
          <li class="divider"></li> 
 
          <li><a href="browse.php?&amp;type=1">Laptop</a></li><li><a href="browse.php?&amp;type=2">Chromebook</a></li> 
 
          <li class="divider"></li> 
 
          <li><a href="browse.php?&amp;vendor=HP">HP</a></li> 
 
          <li><a href="browse.php?&amp;vendor=Lenovo">Lenovo</a></li> 
 
          <li><a href="browse.php?&amp;vendor=Toshiba">Toshiba</a></li> 
 
          <li class="divider"></li> 
 
          <li><a href="browse.php?&amp;model=3">HP Brilliance 5000</a></li> 
 
          <li><a href="browse.php?&amp;model=1">Lenovo B50-70</a></li> 
 
          <li><a href="browse.php?&amp;model=2">Toshiba Portege R930</a></li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
       <div class="col-xs-2" id="page-numbers"> 
 
        <!-- <p class="no-bottom-pad">136 laptops</p> --> 
 
        <ul class="pagination"> 
 
         <li class="active"><a href="browse.php?&amp;page=1">1</a></li> 
 
         <li><a href="browse.php?&amp;page=2">2</a></li> 
 
         <li><a href="browse.php?&amp;page=3">3</a></li> 
 
        </ul> 
 
       </div> 
 
       <div class="col-xs-7"> 
 
        <a href="#" id="add-laptop-btn" class="btn btn-default" onclick="laptop_modal('new')"> 
 
         Add Laptop 
 
        </a> 
 
        <input id="add-multiple-input" class="btn btn-default less-right-pad" type="number" min="0" max="50"> 
 
        <a href="#" id="add-multiple-btn" class="btn btn-default less-right-pad disabled" onclick="addMultiple();"> 
 
         Add Multiple -&gt; 
 
        </a> 
 
        <input id="earmark-multiple-input" class="btn btn-default less-right-pad" type="number" min="0" max="50"> 
 
        <a href="#" id="earmark-multiple-btn" class="btn btn-default less-right-pad disabled" onclick="addMultiple();"> 
 
         Earmark Multiple -&gt; 
 
        </a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
</body> 
 
</html>

Quelle

2016-08-13 09:16:06 Ahmad

Wie Bootstrap Paginierung in-line mit den Tasten

Antwort

Verwandte Themen