ブートストラップはすべてをセンタリングしています

ブートストラップには基本的なログインダイアログボックスがあります。このダイアログボックスは画面の中央にあり、ラベルは入力ボックスの上にあります。すべてがコンテナ内で一列に並んでいます。ブートストラップはすべてをセンタリングしています

私がブラウザを大きくすると、テキストボックスで囲むようにラップされていましたが、ラップしていたので、大きくするためcol-md-3をcol-md-5に変更しましたただし、ブラウザのサイズを変更すると、ページ上のテキストとボタンの中心がずれることはありません。どのように私は私があまりにもブートストラップのCSSを上書きするか、クラスを使用するか分からないので、これをやめますか？私は '左下'のクラスを試しましたが、あまり効果はありませんでしたか？

正直言って、私はそれに関係なく、すべて別々の行には満足していますが、私はそれを修正する方法がわかりません。

<div class="container body-content" > 
<section id="loginForm"> 
    <form action="superLogin.asp" class="form-horizontal" method="post" role="form"> 
     <div class="form-group"> 
      <label class="col-md-5 control-label" for="username">Supervisor ID</label> 
      <div class="col-md-10"> 
       <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" /> 
       <span class="field-validation-valid text-danger" data-valmsg-for="username" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-md-5 control-label" for="Password">Password</label> 
      <div class="col-md-10"> 
       <input class="form-control" data-val="true" data-val-required="The Password field is required." id="password" name="password" type="password" /> 
       <span class="field-validation-valid text-danger" data-valmsg-for="password" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-5 col-md-10"> 
       <input type="submit" value="Log in" class="btn btn-default" /> 
      </div> 
     </div> 
    </form>   
</section> 
</div>

フィドルは、ここで見つけることができます： https://jsfiddle.net/bmcmecbf/

が

出典

2016-12-22 Neil Walker

とにかく別の行にコントロールを置いておきたい場合は、 '.form-horizontal'クラスなしで'

あなたの列は、任意の行に12に等しくありません効果を確認するために、出力領域のサイズを変更、あなたは各行が12の列に等しいことを確認する必要があります。列の長さは15です。列クラスをコピーして12に等しくなるように修正しました。実際にはラベルが集中しているように見えるようにしている新しい行に折り返します。それは彼らが問題を引き起こして座っている列ですcol-md-5。また、私が追加したコードに行クラスがありません。これにより、正しい動作/結果が得られます。

<div class="container body-content"> 
    <div class="row"> 
    <section id="loginForm"> 
     <form action="superLogin.asp" class="form-horizontal" method="post" role="form"> 
     <div class="form-group"> 
      <label class="col-md-3 control-label" for="username">Supervisor ID</label> 
      <div class="col-md-9"> 
       <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" /> 
       <span class="field-validation-valid text-danger" data-valmsg-for="username" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-md-3 control-label" for="Password">Password</label> 
      <div class="col-md-9"> 
       <input class="form-control" data-val="true" data-val-required="The Password field is required." id="password" name="password" type="password" /> 
       <span class="field-validation-valid text-danger" data-valmsg-for="password" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-3 col-md-9"> 
       <input type="submit" value="Log in" class="btn btn-default" /> 
      </div> 
     </div> 
     </form>   
    </section> 
    </div> 
</div>

別々の行に表示する場合は、列クラスをcol-md-12に変更します。

<div class="form-group"> 
    <label class="col-md-12 control-label" for="username"> 
    Supervisor ID 
    </label> 
    <div class="col-md-12"> 
     <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" /> 
    </div> 
</div>

form-horizontalクラスは不要なので削除することもできます。

出典

2016-12-22 12:04:31

ありがとう。私はこれと以下の答えを試してみます。 –

ただし、ブラウザのサイズを変更すると、テキストとボタンの中央がページの中央に配置されずに配置されます。

問題：はこれらのHTMLの行です。

<label class="col-md-5 control-label" for="username">Supervisor ID</label> 
<div class="col-md-10">

ブートストラップグリッドシステムによれば、最大で12個の列を持つことができます。しかし、今は15がありますので、divは同じ行にとどまるのではなく、次の行にプッシュされます。

ソリューション：合計で12列の合計を持っていることを確認してください。

<label class="col-md-4 control-label" for="username">Supervisor ID</label> 
<div class="col-md-8">

出典

2016-12-22 12:05:34

<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<section id="loginForm"> 
 
    <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10"> 
 
    <form action="superLogin.asp" class="form-horizontal" method="post" role="form"> 
 
     
 
    \t \t \t \t \t \t <div class="form-group"> 
 
           <label>Supervider ID</label> 
 
           <input class="form-control" placeholder="ID" type="email"> 
 
          </div> 
 
          <div class="form-group"> 
 
           <label>Password</label> 
 
           <input class="form-control" placeholder="Password" type="text"> 
 
          </div> 
 
          
 
     
 
     \t <div class="form-group"> 
 
      
 
      <input type="submit" value="Log in" class="btn btn-default pull-left" /> 
 
     </div> 
 
    </form>  
 
    </div> 
 
</section>

ような何かが、この情報がお役に立てば幸いです。

出典

2016-12-22 12:06:44

Firebugのような検査ツールで要素を調べると、領域の幅を特定のポイントに広げると、ブートストラップの@mediaクエリが表示され、要素が何らかの理由で右に揃うことがわかります。は、私は、テキストの左と左引きしようとしたが、それは

出典

2016-12-22 12:10:53 Alex

右ラベルを整列されたメディアクエリー内のスタイルがあります： '.FORM水平.controlラベル{テキスト整列：右;}'これは.FORM水平.controlラベル{テキスト 'に変更する必要が-align：left;} 'これが問題を解決します。 –

は、以下の固定このコードを試してみてください動作しませんでした。 labelタグにcol-mdクラスを含めるのではなく、divで使用し、そのdiv内でラベルをラップします。

<section id="loginForm"> 
<form action="superLogin.asp" class="form-horizontal" method="post" role="form"> 
    <div class="form-group"> 
     <div class="col-md-12"> 
      <label class="control-label" for="username">Supervisor ID</label> 
     </div> 
     <div class="col-md-12"> 
      <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" /> 
      <span class="field-validation-valid text-danger" data-valmsg-for="username" data-valmsg-replace="true"></span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-12"> 
      <label class="control-label" for="Password">Password</label> 
     </div> 
     <div class="col-md-12"> 
      <input class="form-control" data-val="true" data-val-required="The Password field is required." id="password" name="password" type="password" /> 
      <span class="field-validation-valid text-danger" data-valmsg-for="password" data-valmsg-replace="true"></span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-12"> 
      <input type="submit" value="Log in" class="btn btn-default" /> 
     </div> 
    </div> 
</form>   
</section>

出典

2016-12-22 12:11:26

ありがとうございます。私はこれと上記の答えを試してみます。 –

ブートストラップはすべてをセンタリングしています

答えて

関連する問題