Bootstrap3仅设置输入组中输入文本的宽度

时间:2015-07-21 13:55:04

标签: css twitter-bootstrap

使用bootstrap3我想在input-Group中设置input type =“text”的宽度。

我找到了这两个解决方案,但是这样我设置了所有元素的总宽度,而不仅仅是输入文本宽度。

.paginator {
  width: 300px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
      <div class="col-md-12">
        <div class="paginator">
          <div class="input-group input-group-sm">
            <div class="input-group-btn input-group-sm">
              <button type="button" class="btn btn-default"> &lt;&lt; </button>
              <button type="button" class="btn btn-default"> &lt; </button>
              <button type="button" class="btn btn-default">Pag</button>
            </div>
            <input class="form-control" type="text">
            <div class="input-group-btn input-group-sm">
              <button type="button" class="btn btn-default">of 44</button>
              <button type="button" class="btn btn-default"> &gt; </button>
              <button type="button" class="btn btn-default"> &gt;&gt; </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <br>

    <div class="row">
      <div class="col-md-3">
        <div class="input-group input-group-sm">
          <div class="input-group-btn input-group-sm">
            <button type="button" class="btn btn-default"> &lt;&lt; </button>
            <button type="button" class="btn btn-default"> &lt; </button>
            <button type="button" class="btn btn-default">Pag</button>
          </div>
          <input class="form-control" type="text">
          <div class="input-group-btn input-group-sm">
            <button type="button" class="btn btn-default">of 44</button>
            <button type="button" class="btn btn-default"> &gt; </button>
            <button type="button" class="btn btn-default"> &gt;&gt; </button>
          </div>
        </div>
      </div>
    </div>

bootply edit

如何使用bootstrap仅设置文本输入的宽度? 谢谢

- 编辑 -

我尝试按照建议为文本输入设置内联类,但这就是结果。

{{3}}

没有人可以帮助我? 感谢

0 个答案:

没有答案