如何以水平格式显示内联格式的Bootstrap输入？

我想在大屏幕上显示一些内嵌的表单元素，并且在屏幕很小时垂直显示相同的元素。怎么做？请help.please让我知道了进一步information.thanks如何以水平格式显示内联格式的Bootstrap输入？

在这个单一的HTML文件中的所有代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

</head> 
<body> 

<div class="container"> 
    <h2>Horizontal form</h2> 
    <form class="form-horizontal" role="form" style="border: 1px solid; padding: 10px"> 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="email">Email:</label> 
     <div class="col-sm-5"> 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
     </div> 
    </div> 



    <div class="form-group "> 
     <label class="control-label col-sm-2" for="pwd">Password:</label> 
     <div class="col-sm-5">   
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
     </div> 
    </div> 




    <div class="form-group" > 
     <label class="control-label col-sm-2" for="designation">Designation:</label> 

     <div class="col-sm-2"> 

     <select class="form-control col-xs-2" id="designation" onchange="updateText('designation')" > 
     <option value="" disabled selected>Select Designation</option>   
     <option value="04">Chairman</option>        
     <option value="03">Dean</option> 
     </select>  

     <label type="text" class="control-label " for="designationText" >Designation Code </label>    
     <input type="text" value="" class="form-control" id="designationText" placeholder="Code" />  

     </div> 


    </div> 








    <div class="form-group">   
     <div class="col-sm-offset-2 col-sm-10"> 
     <div class="checkbox"> 
      <label><input type="checkbox"> Remember me</label> 
     </div> 
     </div> 
    </div> 
    <div class="form-group">   
     <div class="col-sm-offset-2 col-sm-10"> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </div> 
    </div> 
    </form> 
</div> 

</body> 
</html>

来源

2015-11-22 user5005768

您可以使用网格要做到这一点，请确保您的窗体有上有一个内嵌类第一，然后做一些沿着这些路线：

http://jsfiddle.net/oL2rv8pu/4/

<div class="container"> 
    <h2>Horizontal form</h2> 
    <form class="form-horizontal" role="form" style="border: 1px solid; padding: 10px"> 
     <div class="form-group"> 
      <label class="control-label col-sm-2" for="email">Email:</label> 
      <div class="col-sm-5"> 
       <input type="email" class="form-control" id="email" placeholder="Enter email"> 
      </div> 
     </div> 
     <div class="form-group "> 
      <label class="control-label col-sm-2" for="pwd">Password:</label> 
      <div class="col-sm-5">   
       <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
      </div> 
     </div> 
     <div class="form-group row"> 
      <label class="control-label col-sm-2" for="designation">Designation:</label> 
      <div class="col-sm-2"> 
       <select class="form-control" id="designation" onchange="updateText('designation')" > 
        <option value="" disabled selected>Select Designation</option> 
        <option value="04">Chairman</option> 
        <option value="03">Dean</option> 
       </select>  
      </div> 
      <label type="text" class="control-label col-sm-2" for="designationText" >Designation Code </label>      <div class="col-sm-2"> 
       <input type="text" value="" class="form-control col-sm-2" id="designationText" placeholder="Code" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-offset-2 col-sm-10"> 
       <div class="checkbox"> 
        <label><input type="checkbox"> Remember me</label> 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-offset-2 col-sm-10"> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </div> 
     </div> 
    </form> 
</div>

您可能需要放大您的色谱柱大小以使一切更好地适应，我建议使每一行等于偶数（例如2 + 6而不是2 + 5），以便您可以将它们分成四部分（2 + 2 + 2 + 2）。按照它的规定，它会比您网页的其他部分更宽。

来源

2015-11-22 09:51:57

问题，这个解决方案：指定代码标签 –

@LouisBarranqueiro之前没有的空间，我敢肯定，99.9％，这仅仅是由于不正确的造型和HTML在演示代码中，例如这是他得到的。如果不是，他只需要在第一列上添加col-md-offset-2即可将其移动。 –

不，这是因为此标签及其字段不在“.form-group”中。我试图找到另一种解决方案来解决这个问题 –

您需要从designation中取消嵌套designationText标签/输入，并将它们放在自己的列中，但仍位于与designation相同的表单组中。然后应用适量的列。

*注意：由于这些标签/输入在一个单独的form-group中，因此它们之间的边距与其他标签/输入不同。您可以在媒体查询中添加一些CSS来解决这种差异。

见例如片段和Docs

.myForm { 
 
    border: 1px solid; 
 
    padding: 10px 
 
} 
 
@media (max-width: 767px) { 
 
    #form-group-top { 
 
    margin-top: 15px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h2>Horizontal form</h2> 
 

 

 
    <form class="form-horizontal myForm" role="form"> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="email">Email:</label> 
 
     <div class="col-sm-10"> 
 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group "> 
 
     <label class="control-label col-sm-2" for="pwd">Password:</label> 
 
     <div class="col-sm-10"> 
 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="designation">Designation:</label> 
 
     <div class="col-sm-4"> 
 
     <select class="form-control" id="designation" onchange="updateText('designation')"> 
 
      <option value="" disabled selected>Select Designation</option> 
 
      <option value="04">Chairman</option> 
 
      <option value="03">Dean</option> 
 
     </select> 
 
     </div> 
 
     <label for="designationText" class="control-label col-sm-2" id="form-group-top" for="designationText">Designation Code</label> 
 
     <div class="col-sm-4"> 
 
     <input type="text" value="" class="form-control" id="designationText" placeholder="Code" /> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-offset-2 col-sm-10"> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox">Remember me</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-offset-2 col-sm-10"> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 

 
</div>

来源

2015-11-22 16:58:42 vanburen

如何以水平格式显示内联格式的Bootstrap输入？

回答

相关问题