2017-10-25 2 views
0

그래서 부트 스트랩 4 워드 프로세서에 들어가서 더 많은 중앙에 배치되도록 양식 행에 일부 오프셋을 구현하려고했습니다. 그러나 그것은 작동하지 않으며 나는 왜 확실하지 않다. 나는 유사한 문제를 둘러 보았지만 다른 문제가 해결책을 찾은 곳에서는 문제가되지 않았다. 첫 번째 두 입력 필드에 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

[오프셋 열이 작동하지 않습니다 (부트 스트랩 v4.0.0-beta)] (https://stackoverflow.com/questions/45650990/offsetting-columns-is-not-working-bootstrap-v4-0- 0-beta) –

+0

** 부트 스트랩 @ 4 **는'flex-box' 디자인입니다. '.offset- * class'를 사용할 필요가 없습니다. 이와 같이'justify-content-end','justify-content-between'을 사용할 것입니다. 링크를 확인하고 https://v4-alpha.getbootstrap.com/layout/grid/ – Rahul

+0

@ Rahul 문서를 읽으십시오. 그런데 문서에서 오프셋 부분이 왜 우리가해야하는 방식이 아닌지 – Jorge

답변

0

코드가 표시되지 않지만 때로는 새로운 행이나 컨테이너가 생성되지 않았기 때문에 발생합니다.

그건 당신이 시도 할 수있는 것입니다.

그렇지 않으면 코드를 잘라내는 것이 도움이 될 것입니다.

건배

+0

oh I 완전히 잊었다! 게시물을 편집하고 스 니펫을 추가했습니다. 감사! – Jorge

0

나는 그것을 알아 냈다. 이전에 Bootstrap 4의 이전 버전에서 오프셋 클래스를 사용하려고 시도 했었는데 당시에는 클래스를 선언하지 않았습니다. 재미있게도 DID가 포함 된 버전은이 글을 게시하기 전에 이틀간에 릴리스되었으며 내 부트 스트랩을 업데이트하지 않았습니다. 내가 한거야, 도와 줘서 고마워!

관련 문제