부트 스트랩 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>

을, 당신은 당신의 입력 요소의 폭을 지정할 수 있습니다

.form-control { 
    max-width: 100px !important; 
}

!important 구문에 유의하십시오. 일반적으로 사용하지 말아야하지만,이 경우 부트 스트랩 스타일을 무시하는 데 도움이됩니다.

마지막으로 작업 프로젝트 here을 볼 수 있습니다.

출처

2017-09-14 22:51:51 cwanjt

정말 고마워요! – Sam

문제 없습니다. 기쁜 데 도움이되었습니다. – cwanjt

부트 스트랩 4 인라인 폼 입력 상자의 위치

답변

관련 문제