Input-group-addon对输入文本不完整

时间:2016-07-10 05:09:14

标签: html twitter-bootstrap

我的输入组添加对文本不完整。有人可以帮我这个吗?

这是输出 enter image description here

这是我的风格。

<style>
   .dates{
    width: 200px !important;
    margin-left: 500px;
    }
 </style>

这是日期的代码

        <div class="form-group">
               <label for="title">Date</label>
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control dates" />
                    <span class="input-group-addon">
                      <span class="glyphicon glyphicon-calendar"></span> 
                    </span>
                </div>
            </div>

1 个答案:

答案 0 :(得分:1)

纠正我如果我错了,因为我不完全了解上下文。这是否需要将输入设置为200px?

如果您确实要将输入宽度设置为特定值,则它必须位于input-group的容器中。

&#13;
&#13;
.form-group-wrapper {
  width: 240px;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group-wrapper">
  <div class="form-group">
    <label for="title">Date</label>
    <div class='input-group date' id='datetimepicker1'>
      <input type='text' class="form-control dates" />
      <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

否则我建议你使用bootstrap网格系统让它更容易。

&#13;
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
      <div class="form-group">
        <label for="title">Date</label>
        <div class='input-group' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;