入力応答幅ブートストラップ

ブラウザのウィンドウサイズを変更すると、入力の100％の幅から50％の幅に変更し、それを中央に持っていて応答します。入力応答幅ブートストラップ

<!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>

出典

2016-12-10 eternaty

あなたはどのようなCSSを試してみましたか？ –

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

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

出典

2016-12-11 00:05:35 tocqueville

-1

あなたがHTMLのheadセクションにブートストラップCSSファイルの後、あなたのCSSファイルを配置する場合、それは幅上書きしなければならないと私はあなたが削除することができると思うが重要、その後。スニペットは少し不便です。

.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>

出典

2016-12-11 00:06:27

'left：0;'や 'right：0;'は必要ありません。彼の例では、 'style.css'はブートストラップの後にリンクされていますので、'！important'を安全に削除できます。モバイルデバイスで入力が小さすぎるのを防ぐために、 'min-width：100px; 'などを追加することもできます。 –

入力応答幅ブートストラップ

答えて

関連する問題