2017-10-25 33 views
0

私はブートストラップ4のドキュメントに入り、フォームの中心になるようにフォームの列にオフセットを実装しようとしました。しかし、それは動作していないと私はなぜわからない。私は同様の問題を見回しましたが、他の問題が解決策を見出したところで、私の問題は解決しませんでした。最初の2つの入力フィールドにoffset-5を実装しました。こちらのページは以下のとおりです。https://jorgeg1105.github.io/JorgePortfolioV3/、ここでは、私はとのトラブルを抱えていた領域のためのコードスニペットです:ブートストラップ4のオフセットクラスで問題が発生しました

<div class="contact text-center"> 
 
\t \t <div class="contact_container"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-xl-12"> 
 
\t \t \t \t \t <h2>Want To Work Together?</h2> 
 
\t \t \t \t \t <p class="jorgeInfo">Tell me a little bit about yourself and your project. Then I will get in contact with you to schedule a time to chat. You can expect a reply within a day at most.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div><!--end row--> 
 
\t \t \t <form> 
 
\t \t \t \t <div class="form-row"> 
 
\t \t \t \t \t <div class="col-3 offset-5"> 
 
\t \t \t \t \t \t <input type="text" class="form-control" placeholder="First Name *"> 
 
\t \t \t \t \t </div><!--end col--> 
 
\t \t \t \t \t <div class="col-3 offset-5"> 
 
\t \t \t \t \t \t <input type="text" class="form-control" placeholder="Last Name *"> 
 
\t \t \t \t \t </div><!--end col--> 
 
\t \t \t \t </div><!--end row--> 
 
\t \t \t \t <div class="form-row"> 
 
\t \t \t \t \t <div class="col-3"> 
 
\t \t \t \t \t \t <input type="text" class="form-control" placeholder="Phone Number"> 
 
\t \t \t \t \t </div><!--end col--> 
 
\t \t \t \t \t <div class="col-3"> 
 
\t \t \t \t \t \t <input type="email" class="form-control" placeholder="Email *"> 
 
\t \t \t \t \t </div><!--end col--> 
 
\t \t \t \t </div><!--end row--> 
 
\t \t \t \t <div class="form-row"> 
 
\t \t \t \t \t <div class="col-3"> 
 
\t \t \t \t \t \t <input type="text" class="form-control" placeholder="What is 5+2? *"> 
 
\t \t \t \t \t </div><!--end col--> 
 
\t \t \t \t </div><!--end row--> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-5"> 
 
\t \t \t \t \t \t <textarea class="form-control" rows="5" placeholder="Tell me a little about your project. Budget details are also appreciated."></textarea> 
 
\t \t \t \t \t </div><!--end col--> 
 
\t \t \t \t </div><!--end row--> 
 
\t \t \t \t <button type="submit" class="button">Submit</button> 
 
\t \t \t </form><!--end form--> 
 
\t \t \t <p>* Required</p> 
 
\t \t </div><!--end contact_container--> 
 
\t </div><!--end contact-->

おかげでトン!

+0

[Offsetting columns is not working(Bootstrap v4.0.0-beta)]の重複している可能性があります(https://stackoverflow.com/questions/45650990/offsetting-columns-is-not-working-bootstrap-v4-0- 0-beta) –

+0

** Bootstrap @ 4 **は 'flex-box'デザインです。 '.offset- * class'を使う必要はありません。このように 'justify-content-end'、' justify-content-between'を使います。リンクを確認して、ドキュメントを読んでくださいhttps://v4-alpha.getbootstrap.com/layout/grid/ – Rahul

+0

@ Rahulなぜ私はそれが私たちがそれをやるべきではない方法であればドキュメント内のオフセット部分 – Jorge

答えて

0

コードは表示されませんが、新しい行やコンテナが作成されていないことが原因です。

これはあなたが試すことができるものです。

それ以外の場合は、コードをスニッフィングすると役立ちます。

乾杯

+0

ああ私完全に忘れてしまった!投稿を編集してスニペットを追加しました。ありがとう! – Jorge

0

私はそれを考え出しました。私は、ブートストラップ4の古いバージョンでオフセットクラスを使用しようとしていたことを明らかにしました。私がこれを投稿する前の2日のように、DIDがそれを含むバージョンが面白かったので、私はブートストラップを更新していませんでした。私は今しました、助けてくれてありがとう!