입력 그룹에 두 개의 입력 부트 스트랩

다음 HTML이 있지만 두 개의 입력을 모든 버튼과 같은 줄에 올릴 수는 없습니다.입력 그룹에 두 개의 입력 부트 스트랩

<div class="well"> 
    <div class="input-group"> 
     <input class="form-control" placeholder="Page path"> 
     <input class="form-control" placeholder="Name"> 
     <div class="input-group-btn">       
     <a href="#" class="btn btn-info">View</a> 
     <a href="#" class="btn btn-primary">Edit</a> 
     <a href="#" class="btn btn-danger">Delete</a></div> 
    </div> 
</div>

http://www.bootply.com/Iu7Ic99jm6

출처

2014-07-08 newbie

당신은 다소 입력 그룹 위젯을 남용하고 있습니다. 좋은 결과 내길 바랄 게. "우리는 한면에 여러 개의 애드온을 지원하지 않지만 단일 입력 그룹에서 여러 개의 양식 컨트롤을 지원하지 않습니다." - http://getbootstrap.com/components/#input-groups – cvrebert

부트 스트랩 그 입력 요소 100 %의 폭을 만든다. 해당 값을 덮어 써야합니다. 이런 식으로 뭔가 : 당신이되고 입력을 강제로 col 된 div를 사용할 수 http://www.bootply.com/ApJNHnX5Lv

출처

2014-07-08 10:53:46 ElwoodP

이것은 응용 프로그램 전체에서'.form-control '등을 사용하는 경우에 영향을줍니다. 반응이 빠른 CSS 레이아웃을 변경하는 대신 부트 스트랩에서 마크 업을 사용하는 것이 좋을까요? – davidkonrad

@davidkonrad 클래스를 추가하여 규칙을 좀 더 구체적으로 만드는 것은 쉽습니다. 나는 당신의 대답도 좋지만 결과가 다르다는 것에 동의합니다. 내 답변을 통해 실제 CSS가 어떻게 작동했는지에 대한 통찰력을 얻으 려 노력했습니다. – ElwoodP

안녕하세요 @ 엘우드 우드, 예, 그냥 말하고 있습니다. 어쨌든 다른 곳에서 .form-control 등을 사용하지 않는다면 문제가되지 않습니다. – davidkonrad

클래스를 form-inline

<div class="well"> 
    <div class="form-inline"> 
    <div class="form-group"> 
     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Page path"> 
     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Name"> 
     <a href="#" class="btn btn-info">View</a> 
     <a href="#" class="btn btn-primary">Edit</a> 
     <a href="#" class="btn btn-danger">Delete</a> 
    </div> 
    </div> 
</div>

Bootply

출처

2014-07-08 10:56:55 Nalaka526

를 사용해보십시오 :

.input-group .form-control { 
    width:45%; 
    margin-right:5%; 
}

여기 내 bootply 포크를 참조하십시오 특정 장소에서. form-inline/form-grouplike so

출처

2014-07-08 11:00:47 serakfalcon

장소 .form-group<div> 년대에 입력 된 전체 .form-inline<form> 태그의 내용, 입력 버튼 섹션 배치와 콤보 :

<div class="well"> 
     <form class="form-inline"> 
     <div class="form-group"> 
      <input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Page path"> 
      <input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Name"> 
     </div> 
     <div class="form-group">       
      <a href="#" class="btn btn-info">View</a> 
      <a href="#" class="btn btn-primary">Edit</a> 
      <a href="#" class="btn btn-danger">Delete</a> 
     </div> 
     </form> 
</div>

bootply 갈래의 참조 ->http://www.bootply.com/xSxTb0xzqh

출처

2014-07-08 11:03:29 davidkonrad

입력 그룹에 두 개의 입력 부트 스트랩

답변

관련 문제