如何在 Bootstrap 3 表单中进行小宽度输入

Question

我在 bootstrap 3 中有一个表格，但是我不知道如何进行更窄的输入。在我的示例中，我只需要输入家庭号码字符（数字）。

你可以看这里： http://jsfiddle.net/DTcHh/3346/（您需要全屏查看结果）

或此处：

<div class="row">
    <div class="col-md-6">

    <form class="form-horizontal">
    <fieldset>

        <legend>Left column</legend>

        <div class="form-group">
            <label class="col-md-3 control-label">Country</label>
            <div class="col-md-9">
            <input type="text" id="firma_nip" class="form-control input-md">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">City</label>
            <div class="col-md-9">
            <input type="text" id="firma_nip" class="form-control input-md">
            </div>
        </div>

        <div class="form-group">
          <div class="controls form-inline">
            <label class="col-md-3 control-label">Street</label>
            <div class="col-md-4">
                <input type="text" class="form-control input-md input-small" id="inputKey">
            </div>
            <div class="col-md-4">
                <label for="firma_nip">No</label>
            <input type="text" class="form-control input-md" placeholder="Value" id="inputValue">
            </div>
          </div>
        </div>


        <!-- Button -->
        <div class="form-group">
          <label class="col-md-3 control-label" for="submit"></label>
          <div class="col-md-9">
            <button id="submit" name="submit" class="btn btn-success">Add new address</button>
          </div>
        </div>

    </fieldset>
    </form>
    </div>

    <div class="col-md-6">
        ..right column
    </div>

</div>

理想的解决方案不应使用自定义类。可以在 bootstrap 中完成吗？

我想要这样的结果：

Answer 1

尝试用 sm 或 xs 代替 md 会有帮助。如需更多了解，请参阅# http://getbootstrap.com/css/#grid

<div class="row">
<div class="col-sm-6">

    <form class="form-horizontal">
        <fieldset>
            <legend>Left column</legend>
            <div class="form-group">
                <label class="col-sm-3 control-label">Country</label>
                <div class="col-sm-9">
                    <input type="text" id="firma_nip" class="form-control input-sm">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">City</label>
                <div class="col-sm-9">
                    <input type="text" id="firma_nip" class="form-control input-sm">
                </div>
            </div>

            <div class="form-group">
                <div class="controls form-inline">
                    <label class="col-sm-3 control-label">Street</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control input-sm input-small" id="inputKey">
                    </div>
                    <div class="col-sm-4">
                        <label for="firma_nip">No</label>
                        <input type="text" class="form-control input-sm" placeholder="Value" id="inputValue">
                    </div>
                </div>
            </div>


            <!-- Button -->
            <div class="form-group">
                <label class="col-sm-3 control-label" for="submit"></label>
                <div class="col-sm-9">
                    <button id="submit" name="submit" class="btn btn-success">Add new address</button>
                </div>
            </div>

        </fieldset>
    </form>
</div>

<div class="col-sm-6">
    ..right column
</div>

Answer 2

Here is your answer

<div class="row">
<div class="col-xs-6">
<form class="form-horizontal">
<fieldset>
    <legend>Left column</legend>
    <div class="form-group col-xs-12 pull-left">
        <div class="col-xs-3">
            <label class="control-label pull-right">Country</label>
        </div>
        <div class="col-xs-9">
            <input type="text"  class=" form-control input-md pull-left">
            </div>
    </div>
    <div class="form-group col-xs-12">
        <div class="col-xs-3">
            <label class="col-xs-3 control-label pull-right">City</label>
        </div>
        <div class="col-xs-9">
            <input type="text" id"firma_nip" class="col-xs-9 form-control input-md pull-left">
            </div>
    </div>
    <div class="form-group col-xs-12">
        <div class="col-xs-3">
            <label class=" control-label pull-right">Street</label>
        </div>
        <div class="col-xs-4">            
            <input type="text" class="form-control input-md input-small pull-left" id="inputKey">
        </div>
        <div class="col-xs-2"> 
            <label class="col-xs-3 pull-left control-label" for="firma_nip">No</label>
        </div>
        <div class="col-xs-3"> 
            <input type="text" class="form-control input-md pull-left" placeholder="Value" id="inputValue">
        </div>
    </div>
    <!-- Button -->
    <div class="form-group col-xs-12">
      <label class="col-xs-3 xs-label" for="submit"></label>
      <div class="col-xs-9">
        <button id="submit" name="submit" class="btn btn-success">Add new address</button>
      </div>
    </div>
</fieldset>
</form>
</div>

<div class="col-xs-6">
    ..right column
</div>

Answer 3

您可以通过向自定义 css 样式文件添加额外的 class 来实现。 [http://www.bootply.com/THJAazI66Q][1] It has been requested [https://github.com/twbs/bootstrap/issues/15107][2]

.input-xs {
        height: 22px;
        padding: 5px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
        }


    <div class="row">
      <div class="col-md-6">
      <form class="form-horizontal">
        <fieldset>
          <legend>Left column</legend>

          <div class="form-group">
            <label class="col-md-3 control-label">Country</label>
            <div class="col-md-9">
              <input type="text" id="firma_nip" class="form-control input-xs">
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-3 control-label">City</label>
            <div class="col-md-9">
              <input type="text" id="firma_nip" class="form-control input-xs">
            </div>
          </div>

          <div class="form-group">
            <div class="controls form-inline">
              <label class="col-md-3 control-label">Street</label>
              <div class="col-md-4">
                <input type="text" class="form-control input-xs input-small" id="inputValue">
              </div>
            </div>
          </div>

          <!-- Button -->

          <div class="form-group">
            <label class="col-md-3 control-label" for="submit"></label>
            <div class="col-md-9">
              <button id="submit" name="submit" class=" btn-xs btn-success">Add new address</button>
            </div>

          </div>

        </fieldset>
        </form>
      </div>

      <div class="col-md-6">
        ..right column
      </div>


    </div>

如何在 Bootstrap 3 表单中进行小宽度输入

How to make a small width input in Bootstrap3 forms

html

forms

twitter-bootstrap-3