jquery - Bootstrap 3 带标签的内联输入元素

Question

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

我已经在 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>

为什么会这样？ 有什么办法可以解决这个问题吗？

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

Answer 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>