Bootstrap 3.0 : 같은 줄에 텍스트와 입력을 사용하는 방법은 무엇입니까?

Bootstrap 3.0 : 같은 줄에 텍스트와 입력을 사용하는 방법은 무엇입니까?

---

현재 웹 사이트를 Bootstrap 3.0으로 전환하고 있습니다. 양식 입력 및 텍스트 서식에 문제가 있습니다. Bootstrap 2에서 작동했던 것은 Bootstrap 3에서 작동하지 않습니다.

양식 입력 전후에 같은 줄에 텍스트를 표시하려면 어떻게해야합니까? 예제의 Bootstrap 3 버전에서 'form-control'클래스 문제로 범위를 좁혔습니다.

모든 텍스트와 입력을 한 줄로 가져 오는 방법은 무엇입니까? 부트 스트랩 3 예제가 jsfiddle의 부트 스트랩 2 예제처럼 보이기를 바랍니다.

JS 바이올린 예

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

업데이트 : 작동하지만 정렬에 문제가있는 코드를 변경합니다. 어떤 아이디어?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

---

원하는 각 요소를 행 내의 별도의 col-md- * div 안에 인라인으로 넣습니다. 또는 요소가 인라인으로 표시되도록합니다. 폼 컨트롤 클래스는 부트 스트랩이 수행해야한다고 생각하는 방식이기 때문에 블록을 표시합니다.

---

http://getbootstrap.com/css/#forms-horizontal 문서에서 직접 .

Bootstrap의 미리 정의 된 그리드 클래스를 사용 .form-horizontal하여 양식 에 추가 하여 (일 필요는 없음) 가로 레이아웃의 레이블 및 양식 컨트롤 그룹을 정렬 <form>합니다. 이렇게하면 변경 사항 .form-groups이 그리드 행처럼 작동하므로 .row.

견본:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

---

필요한 것은 .form-inline수업입니다. 하지만 새 .form.inline클래스에서는 각 컨트롤의 너비를 지정 해야하므로주의해야합니다 .

이것 좀 봐

---

None of these worked for me, had to use .form-control-static class.

http://getbootstrap.com/css/#forms-controls-static

---

You can do it like this:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

Fiddle

---

The way I solved it was simply to add an override for all my textboxes on the main css of my site, as so:

.form-control {
    display:initial !important;
}

---

just give mother of div "class="col-lg-12""

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

it will be

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

---

all please check the updated code as we have to use

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

thanks with regards

---

Or you can do this:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

I tried every one of the suggestions above and none of them worked. I don't want to pick a fixed number of columns in the 12 column grid. I want the prompt, and the input right after it, and I want the columns to stretch as needed.

Yes, I know, that is against what bootstrap is all about. And you should NEVER use a table. Because DIV is so much better than tables. But the problem is that tables, rows, and cells actually WORK.

YES - I REALLY DO know that there are CSS zealots, and the knee-jerk reaction is never never never use TABLE, TR, and TD. Yes, I do know that DIV class="table" with DIV class="row" and DIV class="cell" is much much better. Except when it doesn't work, and there are many cases. I don't believe that people should blindly ignore those situations. There are times that the TABLE/TR/TD will work just fine, and there is not reason to use a more complicated and more fragile approach just because it is considered more elegant. A developer should understand what the benefits of the various approaches are, and the tradeoffs, and there is no absolute rule that DIVs are better.

"Case in point - based on this discussion I converted a few existing tds and trs to divs. 45 minutes messing about with it trying to get everything to line up next to each other and I gave up. TDs back in 10 seconds later - works - straight away - on all browsers, nothing more to do. Please try to make me understand - what possible justification do you have for wanting me to do it any other way!" See [https://stackoverflow.com/a/4278073/1758051]

And this: "

Layout should be easy. The fact that there are articles written on how to achieve a dynamic three column layout with header and footer in CSS shows that it is a poor layout system. Of course you can get it to work, but there are literally hundreds of articles online about how to do it. There are pretty much no such articles for a similar layout with tables because it's patently obvious. No matter what you say against tables and in favor of CSS, this one fact undoes it all: a basic three column layout in CSS is often called "The Holy Grail"." [https://stackoverflow.com/a/4964107/1758051]

I have yet to see a way to force DIVs to always line up in a column in all situations. I keep getting shown trivial examples that don't really run into the problems. "Responsive" is about providing a way that they will not always line up in a column. However, if you really want a column, you can waste hours trying to get DIV to work. Sometimes, you need to use appropriate technology no matter what the zealots say.

참고URL : https://stackoverflow.com/questions/18499041/bootstrap-3-0-how-to-have-text-and-input-on-same-line