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

Question

我正在尝试在非常小的列中实现内联形式：

我已经编写了一些代码，希望在 col-lg-x 中使用 chrome ，但除此之外的任何其他大小，然后我的表单崩溃并转到新的一列。

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

注意：此处通过调整大小我的意思是调整浏览器大小以检查不同的屏幕尺寸。

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;