Bootstrap3-元素不会保留在div的宽度-Bootstrap3-elementwon'tstayinthewidthofthediv

1  

The elements containing your labels (.col-xs-4) have a width: 33.33333%.

包含标签的元素（.col-xs-4）的宽度为：33.33333％。

The elements containing your input fields (.col-xs-8) have a width: 66.6666667%.

包含输入字段（.col-xs-8）的元素的宽度为：66.6666667％。

When the screen is narrow these width values are small and the labels and inputs are close together.

当屏幕较窄时，这些宽度值很小，标签和输入靠得很近。

When the screen expands, these width values expand as well, creating a progressively larger gap between label and input.

当屏幕扩展时，这些宽度值也会扩展，从而在标签和输入之间产生越来越大的差距。

The answer is to give the container a width constraint.

答案是给容器一个宽度约束。

Add this style to the container class:

将此样式添加到容器类：

.col-md-12 { max-width: 250px; }

I tested it in Chrome and it works. Also, here's a live demo: http://jsfiddle.net/y0psw5dn/

我在Chrome中进行了测试，但它确实有效。另外，这是一个现场演示：http：//jsfiddle.net/y0psw5dn/

0  

You seemed to inproperly set .login to height:200px.

你似乎没有将.login设置为高度：200px。

    .login{
         /*height:200px*/
    }

Is is what you want?

是你想要的吗？

0  

Try this.

尝试这个。

    

    

        
         
Login

        
UserName:
        

            
            

        
        
Password:
        

            
            

        
        I forgot my password.
        

            

                
            
            

                
            
        
                
    


.login {
    height: 200px;
    width: 330px;
    max-width: 330px;
    padding: 10px 20px 10px 20px;
    background-color: #242424;
    border: 1px solid #545454;
    border-radius: 5px;
    color: #ddd;
}

JSfiddle

的jsfiddle

0  

Just put the .login div under the .container div. Below the code is

只需将.login div放在.container div下。代码下面是

See the jsfiddle demo.

请参阅jsfiddle演示。

I changed your structure. There was some wrong. You can check this demo on jsfiddle

我改变了你的结构。有一些错误。你可以在jsfiddle上查看这个演示

0  

I also using Bootstrap 3 here Just Check it out this code. Your HTML code structure is not organized here. First you need to understand its row and columns architecture what the purpose Behind it.

我也在这里使用Bootstrap 3请查看此代码。您的HTML代码结构不在此处组织。首先，您需要了解其行和列体系结构的目的是什么。

and Here on many places you open the div but you are not closing your at proper Location Where you need to close it.

在这里很多地方你打开div但是你没有在适当的位置关闭你需要关闭它的地方。

I used this HTML Code :

我用过这个HTML代码：

    
    
         
      
      
Login
       

            
UserName:
            

                

            
        
         

            
Password:
            

                

            
        
         

             

                 I forgot my password.
             
         
         

             

               
              
             

               
              
         
      
       

and css code is here:

和css代码在这里：

.login {  height: 200px; width: 330px;  max-width: 330px;  padding: 10px 0px 10px 20px;  background-color: #242424;  border: 1px solid #545454;  border-radius: 10px;  color: #ddd; }  .btn-font{   color: #000; }

and here is my running fiddle Example:

这是我的小提琴示例：

For Demo Click Here

演示点击这里

0  

hi please check below code it should be within container...

嗨，请检查下面的代码，它应该在容器内......

  

    

            

      
      
Login
        
UserName:
          


        
Password:
          


      I forgot my password.
      

        

        

      
      
    

check the demo here

在这里查看演示

0  

Just change your upper starting structure of your html like this only

只需改变你的html的上层起始结构

the problem is with your html structure still many wrong things are present you can make it better just try to improve by understanding the grid system of Bootstrap

问题是你的html结构仍然存在许多错误的东西你可以通过了解Bootstrap的网格系统来尝试改进它更好

it happens because of the improper structure sequence so that

它的发生是因为结构顺序不正确所以

here is the working demo jsfiddle

这是工作演示jsfiddle

DEMO check out

DEMO退房

here i tried to modify your code my way you can check out

在这里，我尝试以我的方式修改你的代码，你可以检查

.login {
  height:280px;
    max-width:250px;
  padding: 10px 20px 10px 20px;
  background-color: #242424;
  border: 1px solid #545454;
  border-radius: 5px;
  color: #ddd;
}
.temp_div{
    float: left;
    margin-top: 10px;
}
.forgetPass_check{
    padding-right:5px;
    vertical-align:bottom;
    padding-left: 15px;
}
.forgetPass_label{
    padding-left:10px;
}
.no-bullets{
    list-style-type: none;
    margin: 0;
    padding-left: 15px;
}
ul.no-bullets li{
    float: left;
    padding-right: 20px;
    color:black;
}

 

         

             
                 
                  
                  
Login
                 
                 
UserName:
                 
Password:
                 
 
                      

                          I forgot my password.
                      
                      

                          

                            

                            

                          
                      
                  
                 
             
        
  

here is the demo code as well

这里也是演示代码

Please Check Out Modified

请检查修改

even you can check this

即使你可以检查这个

Another try

另一个尝试