Eingabe responsive Breite bootstrap

Ich möchte von 100% Breite der Eingabe auf 50% ändern, und habe es in der Mitte und ansprechend, wenn ich die Größe des Fensters des Browsers.Eingabe responsive Breite bootstrap

<!DOCTYPE html> 
<html> 
<head> 
    <title>teste</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <form class="form"> 
       <input type="email" class="form-control" id="exampleInputEmail1"> 
      </form> 
     </div> 

    </div> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

Quelle

2016-12-10 eternaty

Welche CSS haben Sie versucht? –

#exampleInputEmail1 { 
    width: 50%; 
    display: block; 
    margin: 0 auto; 
}

Jsfiddle: https://jsfiddle.net/ygvhs676/1/

Quelle

2016-12-11 00:05:35 tocqueville

-1

Wenn Sie Ihre CSS-Datei nach dem Bootstrap-CSS-Datei im HTML-Kopfbereich platzieren sollte es überschreibt Breite und ich denke, Sie entfernen können dann wichtig!. Snippet ist ein bisschen unbequem dafür.

.form-control{ 
 
    margin: auto; 
 
    left:0; 
 
    right:0; 
 
    width:50% !important; 
 
}

<div class="container"> 
 
     <div class="row"> 
 
      <form class="form"> 
 
       <input type="email" class="form-control" id="exampleInputEmail1"> 
 
      </form> 
 
     </div> 
 

 
    </div> 
 
    
 
<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>

Quelle

2016-12-11 00:06:27

Es gibt keine Notwendigkeit für 'left: 0;' oder 'right: 0;', und in seinem Beispiel ist seine 'style.css' nach Bootstrap verbunden, so dass Sie'! Wichtig' sicher entfernen können. Sie können auch eine 'min-width: 100px;' oder ähnliches hinzufügen, um zu verhindern, dass die Eingabe auf mobilen Geräten zu klein wird. –

Eingabe responsive Breite bootstrap

Antwort

Verwandte Themen