Verwenden von Bootstrap zum Füllen von Leerstellen

Ich möchte ein Div erstellen, das ein Eingabefeld und einige andere Elemente hat. Ich möchte Bootstrap verwenden, um Eingabeboxen eine dynamische Größe zu geben, die ihre Breite ändern mit wechselnder Fensterbreite und in mobilen Geräten in zwei Zeilen anzeigen.Verwenden von Bootstrap zum Füllen von Leerstellen

wie folgt aus:

dies ist ein Beispiel-Code ohne jede Klasse:

<form> 
<div> 
    <input type="submit" value="search"> 
    <select> 
     <option>value1</option> 
     <option>value2</option> 
     <option>value3</option> 
    </select> 
    some text 
</div> 
<div> 
    <input type="text" placeholder="search text input"> 
</div>

Quelle

2016-11-13 Sadegh

ich meine Lösung aktualisiert zu erweitern. Bitte überprüfe das. – Nitheesh

Um Ihre Anforderung Sie müssen zu erreichen geh für die Fle xbox-Anzeigeeigenschaft, um dies mit der reinen CSS-Methode zu erreichen. Hier ordnen Sie die Benutzeroberfläche abhängig von den Bildschirmauflösungen neu an. Flexbox-Display bietet Ihnen die beste Methode, um den Opder des div nach Ihren Wünschen einzustellen. Ich habe das Beispiel-Snippet beigefügt.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<style> 
 
.FormContainer { 
 
\t width: 100%; 
 
} 
 
.Class1 { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.Class2 { 
 
    width: 50%; 
 
    float: right; 
 
} 
 

 
@media only screen and (max-width: 768px) { 
 
    .FormContainer { 
 
\t  display: -webkit-flex; 
 
     display: -ms-flexbox; 
 
     display: flex; 
 
     -webkit-flex-wrap: wrap; 
 
     -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
\t } 
 
    .Class1 { 
 
\t \t order: 2; 
 
     width: 100%; 
 
     float: right; 
 
    } 
 
    .Class2 { 
 
\t  order:1; 
 
     width: 100%; 
 
     float: left; 
 
    } 
 
} 
 
</style> 
 
<body> 
 

 
<form class="FormContainer"> 
 
<div class="Class1"> 
 
    <input type="submit" value="search"> 
 
    <select> 
 
     <option>value1</option> 
 
     <option>value2</option> 
 
     <option>value3</option> 
 
    </select> 
 
    some text 
 
</div> 
 
<div class="Class2"> 
 
    <input type="text" placeholder="search text input"> 
 
</div> 
 
</form> 
 

 
</body> 
 
</html>

hoffen, dass dies für Sie funktionieren.

Hier finden Sie weitere Informationen zur Flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/ und http://philipwalton.github.io/solved-by-flexbox/.

Schauen Sie auch bei this Lösung, die mehr über Flexbox erklärt

Quelle

2016-11-13 15:18:40 Nitheesh

danke, aber das ist nicht was ich will! Ich möchte nicht zwei 50% Spalte. Ich möchte 3 link Element 'Breite sein Text mit – Sadegh

Ich habe die Erklärungen für Class1 und Class2 hinzugefügt, bitte überprüfen Sie das. – Nitheesh

Es funktionierte nicht für mich – Sadegh

ich das erste Bild in Ihrem Beitrag implementiert und es unten im Code. Versuchen Sie es ausgeführt wird, vergessen Sie nicht, Schnipsel

<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<form> 
 
    <div class="row"> 
 
    <div class="col-sm-2"> 
 
     <input type="submit" class="form-control" value="search"> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <select class="form-control"> 
 
     <option>value1</option> 
 
     <option>value2</option> 
 
     <option>value3</option> 
 
     </select> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     some text</div> 
 

 
    <div class="col-sm-2"> 
 
     <input type="text" class="form-control" placeholder="search text input"> 
 
    </div> 
 
    </div>

Quelle

2016-11-13 16:12:48 Aravind

Verwenden von Bootstrap zum Füllen von Leerstellen

Antwort

Verwandte Themen