小さな画面で左に動くブートストラップ入力の防止

私はブートストラップで作業しています。私は問題がある。私は次のクラスを使用しています：form-controlとform-inlinel。そして、ここに私のhtmlです：問題について小さな画面で左に動くブートストラップ入力の防止

input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="select"] 
{ 
    max-width: 100px; 
    margin:0; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

.container-fluid 
{ 
    padding: 20px; 
    text-align: center !important; 
} 
.label 
{ 
    font-size: 15px !important; 
    margin-bottom: 10px !important; 
} 

.center 
{ 
    width: 200px; 
    margin: 0 auto; 
} 

.moveDown 
{ 
    margin-top: 5px !important; 
    display: block !important; 
} 

.label.moveDown 
{ 
    display: inline-block !important; 
}

そして今：ここ

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel="stylesheet" href="css/main.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
</head> 
<body> 
<div class="container-fluid"> 
    <div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div> 
    <div class="center"> 
    <div class="label label-primary">First interval</div> 
    <div class="form-inline"> 
     <input type="text" class="form-control" placeholder="From" id="from1"> 

     <input type="text" class="form-control" placeholder="To" id="to1"> 
    </div> 
    <div class="label label-primary">Second interval</div> 
    <div class="form-inline"> 
     <input type="text" class="form-control" placeholder="From" id="from2"> 

     <input type="text" class="form-control" placeholder="To" id="to2"> 
    </div> 

    <button type="button" class="btn btn-success" id="button">Show intersection</button> 

    <div class="label label-primary moveDown"> 
     Intersection: 
    </div> 
    </div> 
    <div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div> 

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

は、CSSです。あなたが中程度の画面でhtmlを始めるなら、それはまさに大丈夫です、そして私が欲しいものです。しかし、サイズを変更しようとすると、問題に気づくでしょう。私を満足させないものが入力されていれば、十分小さい画面で左に移動します。私がどのようにそれに取り組むことができるか分かっているなら、私を助けてください。

出典

2017-02-23 Anonymous

2つの方法で中央に置くことができます。要素input[type="text"]で

、marginに値autoを追加し、それが中心に留まります。
display: inline-block;をinput[type="text"]に追加できます。

両方の方法で動作します。

EDIT：ブートストラップが要素としてinputをブロックとして設定しているため、モバイルサイズに縮小しても中央に収まらない理由は、それを左側に押します。注意のために非常に多くの

input[type="text"], 
 
input[type="password"], 
 
input[type="email"], 
 
input[type="tel"], 
 
input[type="select"] { 
 
    max-width: 100px; 
 
    margin: 5px auto; 
 
} 
 

 
.container-fluid { 
 
    padding: 20px; 
 
    text-align: center !important; 
 
} 
 

 
.label { 
 
    font-size: 15px !important; 
 
    margin-bottom: 10px !important; 
 
} 
 

 
.center { 
 
    width: 200px; 
 
    margin: 0 auto; 
 
} 
 

 
.moveDown { 
 
    margin-top: 5px !important; 
 
    display: block !important; 
 
} 
 

 
.label.moveDown { 
 
    display: inline-block !important; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <link rel="stylesheet" href="css/main.css"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div> 
 
    <div class="center"> 
 
     <div class="label label-primary">First interval</div> 
 
     <div class="form-inline"> 
 
     <input type="text" class="form-control" placeholder="From" id="from1"> 
 

 
     <input type="text" class="form-control" placeholder="To" id="to1"> 
 
     </div> 
 
     <div class="label label-primary">Second interval</div> 
 
     <div class="form-inline"> 
 
     <input type="text" class="form-control" placeholder="From" id="from2"> 
 

 
     <input type="text" class="form-control" placeholder="To" id="to2"> 
 
     </div> 
 

 
     <button type="button" class="btn btn-success" id="button">Show intersection</button> 
 

 
     <div class="label label-primary moveDown"> 
 
     Intersection: 
 
     </div> 
 
    </div> 
 
    <div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div> 
 

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

 
</html>

出典

2017-02-23 13:17:40 Hewlett

Here is a fiddle

私はform-inlineを削除し、（私はちょうどこの例のためinputsそれを呼ばれる）それ自身のカスタムクラスにそれを変更しました。次に、このCSSを追加しただけです。

あなたはフィドルを前後にスライドさせて中央に留まることができます。

出典

2017-02-23 13:13:08 maxshuty

感謝。しかし、あなたの練習は私にとって悪いと思われます。パーセンテージだけを使用するか、最悪の場合はpxを使用する必要があります。 –

あなたが読むためにあなたのCSSのこの部分を変更した場合：

input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="select"] 
{ 
    max-width: 100px; 
    margin:0 auto; 
    margin-top: 5px; 
    margin-bottom: 5px; 
}

Margin: 0 Auto;属性力センターの入力をあなたに！アカウントに追加した5pxのマージンを取るために

input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="select"] 
{ 
    max-width: 100px; 
    margin:5px auto; 

}

：

それもに短縮することができます。

希望すると便利です。

出典

2017-02-23 13:14:17

ありがとうございました。それは助けになった。 –

@YaroslavTrofimov問題ありません！ –

小さな画面で左に動くブートストラップ入力の防止

答えて

関連する問題