Wie man bootstrap-buttons, wo ich will?

In diesem code

<div class="content">
    <h1>TraceMySteps</h1>
       <div>
            <div range-slider
                 floor="0"
                 ceiling="19"
                 dragstop="true"
                 ng-model-low="lowerValue"
                 ng-model-high="upperValue"></div>
        </div>
    <button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>

Habe ich meine bootstrap button erstellt. Das problem hier ist, dass es auf der Unterseite positioniert ist Links von meinen div. Ich möchte es auf der oberen rechten Seite/in der Mitte des div, die im Einklang mit meinem Titel (h1). Wie Stelle ich es wo ich will? Ich bin neu in bootstrap also ich weiß nicht, über diese Problemumgehungen. Danke.

  • Mit position absolute - einfache css
  • Ich habe versucht, ich muss etwas falsch machen, weil der button versteckt
InformationsquelleAutor Shoplifter20 | 2016-03-01
  1. 4

    Sie können die Verwendung von bootstrap-Klassen, dies zu tun.

    Können Sie hinzufügen pull-right Klasse float Sie die Taste auf der rechten Seite.

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
  <button type="button" class="btn btn-primary pull-right" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
  <h1>TraceMySteps</h1>
  <div>
    <div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
  </div>
</div>

    Live-Beispiel hier.

    Wie pro Ihre Kommentare, für mehr präzise Kontrolle, die Sie tun können dieses mit absoluter Positionierung statt.

    Geben Sie die content element relativ positionieren und geben die button absolute Positionierung. Sie können dann verwenden Sie eine beliebige Kombination der top, right, bottom, und left Eigenschaften, um es zu platzieren, wo Sie möchten.

    CSS:

    .content {
  position: relative;
}
#right-panel-link {
  position: absolute;
  top: 0;
  right: 0;
}

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
  <h1>TraceMySteps</h1>
  <div>
    <div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
  </div>
  <button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>

    Live-Beispiel hier.

    • Das funktioniert jetzt, aber gibt es nicht eine Möglichkeit, Sie in eine willkürliche position?
    • Ja, das würde Ihnen die content element relativ positionieren und geben Sie die absolute Positionierung auf die Schaltfläche. Dann können Sie verwenden, oben, rechts, unten und/oder Links die CSS-Eigenschaften zur Positionierung.
    • Btw, pull-right wird ersetzt durch float-right im Bootstrap 4.
    InformationsquelleAutor Marcelo
  2. 1

    Macht die bootstrap-button in einem div-tag
    Sie können erstellen der bootstrap-button in einem div und verwenden Sie "ausrichten".

    Beispiel:

    <div style="width:350px;" align="center">
    <button type="button" class="btn btn-primary" >edit profile picture</button>
</div>
    InformationsquelleAutor Sasmitha Dasanayaka
Schreibe einen Kommentar