ブートストラップ4インラインフォーム入力ボックスの位置

私は一般的にブートストラップでは新しくなっていますが、それを理解しようとします。私は彼が写真の下にintを見るようにフォームのログインを持っています。私はボックスは幅の入力を変更するために管理が、私は「私を覚えている」に近いテキストボックスの両方を移動するために管理することができませんでしたチェックボックス、ブートストラップ4インラインフォーム入力ボックスの位置

enter image description here

は基本的に私はテキストボックスの場所を作りたいです下の画像（私は窓のペイントでそれを表示する！）。

<body> 
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> 
    <a class="navbar-brand" href="/">Test</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarCollapse"> 
    <ul class="navbar-nav mr-auto "> 
     <li class="nav-item"> 
     <a class="nav-link" href="test1.html">Services</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="test2.html">Contact</a> 
     </li> 
    </ul> 

    <ul class="navbar-nav ml-auto "> 
     <li class="nav-item"> 

     <form class="form-inline"> 
      <label class="sr-only" for="inlineFormInput">Name</label> 
      <input type="text" class="form-control-sm col-2 mb-0 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Username"> 

      <label class="sr-only" for="inlineFormInputGroup">Username</label> 
      <div class="input-group mb-2 mr-sm-0 mb-sm-0"> 
      <input type="password" class="form-control-sm col-6 mr-sm-2" id="inlineFormInputGroup" placeholder="Password"> 
      </div> 

      <div class="form-check mb-2 mr-sm-2 mb-sm-0"> 
      <label class="form-check-label"> 
       <input class="form-check-input" type="checkbox"> Remember me 
      </label> 
      </div> 

      <button type="submit" class="btn btn-primary">Submit</button> 
     </form> 
     </li> 
    </ul> 
    </div> 
</nav> 
</body>

感謝を：ここで

enter image description hereは、私が使用し、本体のコードです！

出典

2017-09-14 Sam

ブートストラップ4のdocumentationからいくつかのデモの例を取って、自分のCSSで自分の望む結果を得るために使用することができます。

これはあなたのユースケースに合わせていくつかの修正を加えて、そのドキュメントから直接来る：

 <form class="form-inline"> 
      <label class="sr-only" for="inlineFormInputUsername">Username</label> 
      <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputUsername" placeholder="Username"> 

      <label class="sr-only" for="inlineFormInputGroupPassword">Password</label> 
      <div class="input-group mb-2 mr-sm-2 mb-sm-0"> 
       <input type="text" class="form-control" id="inlineFormInputGroupPassword" placeholder="Password"> 
      </div> 

      <div class="form-check mb-2 mr-sm-2 mb-sm-0"> 
       <label class="form-check-label"> 
        <input class="form-check-input" type="checkbox"> Remember me 
       </label> 
      </div> 

      <button type="submit" class="btn btn-primary">Submit</button> 
     </form>

次に、単純なCSSルールで、あなたの入力要素の幅を指定することができます。

!important構文に注意してください。一般的には使用しないでください。この場合は、ブートストラップのスタイリングを無効にするのに役立ちます。

最後に、作業プロジェクトhereが表示されます。

出典

2017-09-14 22:51:51 cwanjt

本当にありがとうございました。 – Sam

問題ありません。それが助けてくれてうれしい。 – cwanjt

ブートストラップ4インラインフォーム入力ボックスの位置

答えて

関連する問題