Question

在获得alignment我的控件的帮助之后，我现在正在努力完全理解，利用和采用该解决方案。

目前的状况可以使用here播放，代码如下：

<div class="row">
  <div class="col-lg-8">
    <div class="form-inline col-lg-4">
      <div class="form-group">    	
        <div class="input-group">
          <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
          <input id="oldpswd" name="oldpswd" placeholder="Altes Passwort" type="password" class="form-control">   
        </div>
      </div>  	
    </div>
    <span id="oldpswd_errmsg" class="bg-danger col-lg-4">xxxx</span>
  </div>
</div>
<div class="row">
  <div class="col-lg-8">
    <div class="form-inline col-lg-4">
      <div class="form-group">    	
        <div class="input-group">
          <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
          <input id="oldpswd" name="newpswd" placeholder="Neues Passwort" type="password" class="form-control">   
        </div>
      </div>  	
    </div>
    <span id="newpswd_errmsg" class="bg-danger col-lg-4">xxxx</span>
  </div>
</div>
<div class="row">
  <div class="col-lg-8">
    <div class="form-inline col-lg-4">
      <div class="form-group">    	
        <div class="input-group">
          <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
          <input id="reppswd" name="reppswd" placeholder="Passwort wiederholen" type="password" class="form-control">   
        </div>
      </div>  	
    </div>
    <span id="reppswd_errmsg" class="bg-danger col-lg-4">xxxx</span>
  </div>
</div>

问题：在行内有一个col-lg-8，其中包含两个col-lg-4 div。据我理解的那样，输入控件应该占据容器的整个宽度，但col-lg-4内的表单组明显小于其容器。

如何修复此布局，以便指定col-lg-类的div使用可用空间？

Answer 1

更新

添加了css以扩展表单控件以使用div扩展。

这是你想要的吗？ http://www.bootply.com/y2K2OY8H1H

你有一行，列为8，里面有两列4列。所以col-8填满了12个主要栏目中的8个。那么2 col-4里面只能填满那个col-8里面的12个中的8个。因此，每次嵌套col时，都会创建嵌套列。这有点令人困惑，但有道理。

新CSS：

  <div class="row">
 <div class="col-md-2">
    <div class="form-inline">
        <div class="form-group">        
            <div class="input-group">
                <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
                    <input id="oldpswd" name="oldpswd" placeholder="Altes Passwort" type="password" class="form-control">   
            </div>
          </div>
        </div>      
    </div>
    <span id="oldpswd_errmsg" class="bg-danger col-lg-3">xxxx</span>

</div>
<div class="row">
  <div class="col-md-2">
    <div class="form-inline">
        <div class="form-group">        
            <div class="input-group">
                <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
                    <input id="oldpswd" name="newpswd" placeholder="Neues Passwort" type="password" class="form-control">   
            </div></div>
        </div>      
    </div>
    <span id="newpswd_errmsg" class="bg-danger col-lg-3">xxxx</span>

</div>
<div class="row">
 <div class="col-md-2">
    <div class="form-inline">
        <div class="form-group">        
            <div class="input-group">
                <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
                    <input id="reppswd" name="reppswd" placeholder="Passwort wiederholen" type="password" class="form-control">   
            </div></div>
        </div>      
    </div>
    <span id="reppswd_errmsg" class="bg-danger col-lg-3">xxxx</span>

</div>

-

test.dat
1
4
3
4
6
2
4
6
8

为什么我的col-lg-不显示全宽？

1 个答案: