引导带3的输入宽度

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (20)

当前的文档说要使用.coll-lg-x,但这显然不起作用,因为它只能应用于容器div,这会导致各种布局/浮点问题。

这是小提琴。奇怪的是,在小提琴上,我甚至不能让形状组调整大小。

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
提问于
用户回答回答于

在此:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

请注意,在新的小提琴,我还添加了‘col-xs-5’,以便可以看到它也在较小的屏幕-删除它们没有什么不同。但是请记住,在你原来的课程中,你只使用“col-lg-1”。这意味着如果屏幕宽度小于“lg”媒体查询大小,则使用默认的块行为。基本上,通过应用“col-lg-1”,所使用的逻辑是:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

用户回答回答于

在Bootstrap 3中

可以简单地创建一个自定义样式:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

然后将其添加到如下所示的窗体控件中:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

扫码关注云+社区