为什么不是我的col-lg-全宽？ [英] Why aren't my col-lg- shown full width?

问题描述

在对齐

我现在正在努力完全理解，利用和采用该解决方案。

目前的情况可以用 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 =oldpswdname =oldpswdplaceholder =Altes Passworttype =passwordclass =form-control> < / DIV> < / DIV> < / DIV> < span id =oldpswd_errmsgclass =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 =oldpswdname =newpswdplaceholder =Neues Passworttype =passwordclass =form-control> < / DIV> < / DIV> < / DIV> < span id =newpswd_errmsgclass =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 =reppswdname =reppswdplaceholder =Passwort wiederholentype =passwordclass =form-control> < / DIV> < / DIV> < / DIV> < span id =reppswd_errmsgclass =bg-danger col-lg-4> xxxx< / span> < / div>< / div>  

该行有一个 col-lg-8 ，其中包含两个 col-lg-4 div。正如我理解文档一样，输入控件应该占用它们容器的整个宽度，但是 col-lg-4 中的form-group明显小于

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

解决方案

更新

窗体控件以div来扩展。

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

你有一排，有8列，里面有两列4。所以col-8填补了12个主要专栏中的8个。然后，col-4内部的2个col-4只填充col-8内部12个中的8个。所以每次嵌套col时，都会创建嵌套列。这是一个有点混乱，但有道理。

新的CSS：

  .form-group {
 width：100％; 
} 
 
 .input-group {
 width：100％; 
 
  

-

 < 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 =oldpswdname =oldpswdplaceholder =Altes Passworttype =passwordclass =form-control> 
< / div> 
< / div> 
< / div> 
< / div> 
< span id =oldpswd_errmsgclass =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 =oldpswdname =newpswdplaceholder =Neues Passworttype =passwordclass =form-control> 
< / div>< / div> 
< / div> 
< / div> 
< span id =newpswd_errmsgclass =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 =reppswdname =reppswdplaceholder =Passwort wiederholentype =passwordclass =form-control> 
< / div>< / div> 
< / div> 
< / div> 
< span id =reppswd_errmsgclass =bg-danger col-lg-3> xxxx< / span> 
 
< / div> 
  

After getting some help with alignment of my controls, I'm now struggling to fully understand, exploit and adopt that solution.

The current state of affairs can be played with here and the code is below:

<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>

Question: within the row there is a col-lg-8 that contains two col-lg-4 divs. As I understood the doc, the input-controls are supposed to take up the entire width of their containers, yet the form-group inside the col-lg-4 is significantly smaller than its container.

How can this layout be fixed so that the divs with designated col-lg- classes use the available space?

解决方案

Updated

Addedd css to expand the form controls to expand with divs.

Is this what you want? http://www.bootply.com/y2K2OY8H1H

You had a row, with a column of 8, with two columns of 4 inside that. So the col-8 fills 8 of the 12 main columns. Then the 2 col-4 inside of that only fill 8 of the 12 inside that col-8. So each time you nest the col's you create nested columns. It is a little confusing, but makes sense.

NEW CSS:

   .form-group {
     width:100%;
   }

  .input-group {
     width:100%; 
   }

-

  <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>

这篇关于为什么不是我的col-lg-全宽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！