为什么引导网格系统不继列的大小

这就是我想要的手机，并扩展在form为什么引导网格系统不继列的大小

对准这就是我写的电话和分机row：

  <div class="row form-group"> 
       <label class="control-label col-md-2" for="phone">Phone</label> 
       <div class="col-md-6"> 
        <input class="col-md-5" id="AdminPhone" name="AdminPhone" type="text" value="" placeholder="(999) 999-9999"> 
        <div class="form-group col-md-7 pull-right"> 
         <label class="control-label col-md-1" style="text-align: right" for="AdminExt">Ext</label> 
         <input class="col-md-6 pull-right" id="AdminExt" name="AdminExt" type="text" value="" placeholder="1234"> 
        </div> 
       </div> 
      </div>

这就是它是如何开始看起来像

或像这样：

我不知道是怎么回事，我应该有结构它的工作吗？

又例如，它上面的电子邮件部分的正常工作是这样的：

  <div class="row form-group"> 
       <label class="control-label col-md-2" for="Email">Email</label> 
       <div class="col-md-6"> 
        <input id="AdminEmail" name="AdminEmail" type="text" value="" style="width: 100%" placeholder="Email"> 
        <span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px; color: lightblue"></span> 
       </div> 

       <div class="col-md-4"> 
        <div> 
         <input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false"> 
         <label class="control-label" for="Show_Admin_phone">Show Admin phone</label> 
        </div> 
       </div> 
      </div>

来源

2016-04-19 Bohn

看起来像你需要指定移动视图文本输入的宽度，导致到目前为止，他们正在其默认的宽度和破坏你的布局 – markoffden

由于您使用仅col-md-*这是媒体装置，您必须使用以及col-sm-*（对于小设备），或者甚至col-xs-*（对于额外的小设备）

但是，我建议你看看Forms Bootstrap Docs，因为你的表单非常复杂，并且不需要使用.col-二。

一个基本的演示看看，文档：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form> 
 
    <div class="form-group"> 
 
    <label for="exampleInputEmail1">Email address</label> 
 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="exampleInputPassword1">Password</label> 
 
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="exampleInputFile">File input</label> 
 
    <input type="file" id="exampleInputFile"> 
 
    <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
    <div class="checkbox"> 
 
    <label> 
 
     <input type="checkbox"> Check me out 
 
    </label> 
 
    </div> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
</form>

来源

2016-04-19 21:25:37 dippas

无需使用pull-right。

http://getbootstrap.com/css/#forms

如果你看一下文档，它显示了formgroup容器重置列计数。

做套用相同的结构文档：

<div class="row"> 
    <form class="form-horizontal"> 
    <div class="form-group col-md-6"> 
     <label class="control-label col-md-2">test</label> 
     <div class="col-md-10"> 
     <input class="form-control" type="text"> 
     </div> 
    </div> 
    <div class="form-group col-md-6"> 
     <label class="control-label col-md-2">test</label> 
     <div class="col-md-10"> 
     <input class="form-control" type="text"> 
     </div> 
    </div> 
    </form> 
</div>

如果你想在相同结构的用于移动设备，你应该测量你的列，列col-xs-*或col-sm-*代替col-md-*使用。

例子：https://jsfiddle.net/gusmgewg/

来源

2016-04-19 21:39:20 Sem

为什么引导网格系统不继列的大小

回答

相关问题