Question

我需要在两个字段中都使用日历进行内联表单。由于某种原因，我无法摆脱文本和输入边界之间的额外空间......这是一个问题的图片

我试图将宽度设置为父div和输入本身....但没有好...

这是我到目前为止所做的。 Fiddle：

      <div class="modify_search">
        <div class="search_wrapper">
          <div class="search_header">
            <form class="form-inline">
              <div class="left">
                <span>DU</span>
                <div class="input-group">
                  <input type="text" class="form-control search_input" id="inlineFormInputGroup">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="right">
                <span>DU</span>
                <div class="input-group">
                  <input type="text" class="form-control search_input" id="inlineFormInputGroup">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

这是css：

      .search_input {
        border: none;
        outline: none;
        font-size: 24px;
        box-shadow: none;
      }

      .search_input:focus {
        box-shadow: none;
      }

      .modify_search {
        overflow: hidden;
        position: absolute;
        background-color: white;
        width: 60vw;
        height: 37vh;
        left: 50%;
        bottom: 5%;
        transform: translate(-50%, 0%);
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75);
      }

      .left,
      .right {
        margin-right: 15px;
        border-bottom: 1px solid grey;
      }

      .left {
        float: left;
      }

      .right {
        float: right;
      }

      .search_header {
        padding: 15px 15px 0px 15px;
      }

      .input-group-addon {
        background-color: white;
        border: none;
      }

Answer 1

当您使用引导程序时，如果您有另一个input-group宽度不同的情况，则必须将witdh应用于input-group，只需向父div添加一个id并使用该css类过滤css类ID

#less-width .input-group{
  width: 180px !important;
}

http://jsfiddle.net/duj0s5ev/8/

或者您可以将其添加到填充所需宽度的引导列

http://jsfiddle.net/duj0s5ev/11/

如何设置bootstrap输入响应宽度？

1 个答案: