Bootstrap 3 带标签的内联输入元素答案

【问题标题】：Bootstrap 3 inline input elements with labelBootstrap 3 带标签的内联输入元素
【发布时间】：2016-02-05 01:42:42
【问题描述】：

我正在尝试在一个非常小的列中实现内联表单，如下所示：

我已经编写了一些代码，希望在 col-lg-x 中的 chrome 中工作，但是除此之外的任何其他大小，然后我的表单就会折叠并转到新的列的行。

这是我的代码：

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-6">
            <div class="form-group">
                <div class="form-inline">
                    <label style="
    font-size: 12px;
    max-wdith: 20% !important;
    width: 15%;
    padding-left: 5px;
    /* padding-right: 5px; */
">From</label>
                    <input class="form-control" placeholder="Email" type="text" style="
    padding: 0;
    border-radius: 2px !important;
    font-size: 13px;
    height: 25px;
    color: grey;
    /* margin-top: 3px; */
    width: 35%;
"> &nbsp;
                    <label style="
    font-size: 12px;
    max-wdith: 20% !important;
    width: 10%;
    /* padding-left: 5px; */
    /* float: left; */
    text-align: right;
">to</label>
                    <input class="form-control" placeholder="Password" type="password" style="
    padding: 0;
    border-radius: 2px !important;
    font-size: 13px;
    height: 25px;
    color: grey;
    /* margin-top: 3px; */
    width: 31%;
">
                </div>
            </div>
        </div>
    </div>
</div>

为什么会这样？ 有没有办法解决这个问题？

注意：这里所说的调整大小是指调整浏览器的大小以检查不同的屏幕尺寸。

【问题讨论】：

可以不带label标签试试，改成span
我在 chrome 和 firefox 中都看到它们内联。又是什么问题？
@progrAmmar 尝试调整大小时问题仍然相同。 @ chez 问题是在调整大小时折叠在其列的两个不同行中

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-6">
            <div class="form-group">
                <div class="form-inline">
    <style>
      
      .myfield{
          border: 1px solid #ccc!important;
          border-radius: 4px!important;
          font-size: 13px;
          height: 25px;
          color: grey;
          max-width: 100px !Important;
          width: 31%;
          padding: 2px 10px;
          box-shadow: inset 0px 0px 11px -5px #000;
      }
      input:focus{
          outline: initial;
          box-shadow: inset 0px 0px 11px -5px red;
      }
      label{
          font-size: 12px;
          max-width: 20px !important;
          width: 15%;
          padding-left: 5px;
      }

      @media screen and (min-width: 400px) {
         #Add here your code for different type of screen resolution
         .myfield{
             #My custom code here
             max-width: 80px !Important;
             width: 10%;
         }
      }
    </style>
                    <label>From</label>
                    <input class="form-control myfield" placeholder="Email" type="text" > &nbsp;
                    <label>to</label>
                    <input class="form-control myfield" placeholder="Password" type="password"  >
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：