Ausrichtungsschaltfläche rechts

Ich weiß, das muss wirklich einfach sein, aber ich versuche, eine Schaltfläche auf der rechten Seite des Fensters nur mit Bootstrap 4 Klassen zu setzen. Es muss in der gleichen Zeile wie der Text sein.Ausrichtungsschaltfläche rechts

<html> 
<head> 
</head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    <body> 
     <div class="row"> 
      <h3 class="one">Text</h3> 
      <button class="btn btn-secondary pull-right">Button</button> 
     </div> 
    </body> 
</html>

Der Code ist in here

Quelle

2017-01-27 jecabeda

Bootstrap 4 uses .float-right als 3. Auch zu .pull-right in Bootstrap Gegensatz, vergessen Sie nicht richtig verschachtelt die Reihen mit Spalten.

Quelle

2017-01-27 13:18:42

-3

Vielleicht können Sie float: right;:

.one { 
 
    padding-left: 1em; 
 
    text-color: white; 
 
    display:inline; 
 
} 
 
.two { 
 
    background-color: #00ffff; 
 
} 
 
.pull-right{ 
 
    float:right; 
 
}

<html> 
 
<head> 
 
    
 
    </head> 
 
    <body> 
 
     <div class="row"> 
 
     <h3 class="one">Text</h3> 
 
     <button class="btn btn-secondary pull-right">Button</button> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-01-27 13:18:24 Alex

-2

Die Bootstrap 4.0.0-Datei, die Sie von CDN erhalten, hat keine Pull-Right (oder Pull-Links) -Klasse. Die v4 ist in Alpha, also gibt es viele Probleme wie diese.

Es gibt 2 Möglichkeiten:

1) Reverse-3.3.7

2 Bootstrap) Schreiben Sie Ihre eigene CSS.

Quelle

2017-01-27 13:20:04

zu schnell mit der Beurteilung. Bootstrap 4 hat eine Float-Right (Float-Left) -Klasse statt Pull-Right (Pull-Left). Es tut uns leid. –

Sie können das Zeilen- und Spaltensystem verwenden, um etwas in der von Ihnen gewünschten Weise auszuführen.

Fügen Sie drei Spalten innerhalb der Zeile ein, in der Sie Ihren Text und die Schaltfläche enthalten haben. Stellen Sie die zwei bis class = „col-sm-1“ und die innere Säule zu class = „col-sm-10“

<div class="row"> 
    <div class="col-sm-1"><h3 class="one">Text</h3></div> 
    <div class="col-sm-10"></div> 
    <div class="col-sm-1"><button class="btn btn-secondary pull-right">Button</button></div> 
</div>

Dies ist keineswegs eine gute Art und Weise zu erreichen, was Sie erreichen wollen, aber es funktioniert (vorausgesetzt die Bildschirmgröße wird nicht zu klein). Die grid system ist ideal für die Strukturierung Ihrer Webseite.

Idealerweise würden Sie Ihr eigenes CSS schreiben, um die Schaltfläche rechts neben der Seite zu fixieren. Aber diese Methode wird funktionieren, wenn Sie das nicht möchten.

Quelle

2017-01-27 13:26:27 Afterfield

<div class="container-fluid"> 
    <div class="row"> 
    <h3 class="one">Text</h3> 
    <button class="btn btn-secondary ml-auto">Button</button> 
    </div> 
</div>

.ml-auto ist nicht Flexbox Art und Weise des Bootstraph 4 Dinge auszurichten.

Quelle

2017-03-31 17:37:16 Killerpixler

Wenn Sie nicht wollen, Schwimmer verwenden, ist die einfachste und sauberste Weg, es ist Spalte unter Verwendung einer Autobreite zu tun:

<div class="row"> 
    <div class="col"> 
    <h3 class="one">Text</h3> 
    </div> 
    <div class="col-auto"> 
    <button class="btn btn-secondary pull-right">Button</button> 
    </div> 
</div>

Quelle

2017-10-31 17:24:39 josemmo

Ausrichtungsschaltfläche rechts

Antwort

Verwandte Themen