自举形式 - 降低高度

形成17行（每行约2-3个控件）。复制下面的示例html。自举形式 - 降低高度

1）要求所有控件的高度减半。初学者与Bootstrap和目前被击中。

2）另外如何控制文本字段的输入大小。

3）也想围绕一些控件使用fieldset。

任何指针赞赏。

感谢，

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 


</head> 

<body> 
    <div class="container"> 
     <form class="form-horizontal" role="form"> 
       <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row11">Label11:</label> 
        </div> 
        <div class="col-sm-1"> 
         <input type="text" class="form-control" id="row11" 
          placeholder="Data 11"> 
        </div> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row12">Label12:</label> 
        </div> 

        <div class="col-sm-6"> 
         <input type="text" class="form-control" id="row12"> 
        </div> 
      </div> 
      <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-1"> 
         <label class="control-label" for="row21">Label21:</label> 
        </div> 

        <div class="col-sm-1"> 
         <input type="text" class="form-control" id="row21" 
          placeholder="Data21"> 
        </div> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row22">Label22:</label> 
        </div> 

        <div class="col-sm-1"> 
         <input type="text" class="form-control" id="row22" placeholder="Data 22"> 
        </div> 
      </div> 


       <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row31">Label31:</label> 
        </div> 

        <div class="col-sm-1"> 
         <input type="text" class="form-control" id="row31" 
          placeholder="Data31"> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row41">Label41:</label> 
        </div> 

        <div class="col-sm-8"> 
         <input type="text" class="form-control" id="row41" 
          placeholder="Data41"> 
        </div> 
       </div> 

      <div class="form-group"> 


        <div class="col-sm-offset-1 col-sm-8"> 
         <input type="text" class="form-control" id="row41" 
          placeholder="Data42"> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row51">Label51:</label> 
        </div> 

        <div class="col-sm-2"> 
         <input type="text" class="form-control" id="row51" 
          placeholder="Data51"> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row61">Label61:</label> 
        </div> 

        <div class="col-sm-2"> 
         <input type="text" class="form-control" id="row61" 
          placeholder="Data61"> 
        </div> 
        <div class="col-sm-offset-3 col-sm-1"> 
         <label class="control-label" for="row62">Label62:</label> 
        </div> 

        <div class="col-sm-2"> 
         <input type="text" class="form-control" id="row62" 
          placeholder="Data62"> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row71">Label71:</label> 
        </div> 

        <div class="col-sm-2"> 
         <input type="text" class="form-control" id="row71" 
          placeholder="Data71"> 
        </div> 
        <div class="col-sm-offset-3 col-sm-1"> 
         <label class="control-label" for="row72">Label72:</label> 
        </div> 

        <div class="col-sm-2"> 
         <div class="dropdown"> 
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
    Ddown 
           <span class="caret"></span> 
          </button> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row81">Label81:</label> 
        </div> 

        <div class="col-sm-2"> 
         <input type="text" class="form-control" id="row81" 
          placeholder="Data81"> 
        </div> 
        <div class="col-sm-offset-3 col-sm-1"> 
         <label class="control-label" for="row82">Label82:</label> 
        </div> 

        <div class="col-sm-2"> 
         <div class="dropdown"> 
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
    Ddown 
           <span class="caret"></span> 
          </button> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row91">Label91:</label> 
        </div> 

        <div class="col-sm-3"> 
         <input type="text" class="form-control" id="row91" 
          placeholder="Data91"> 
        </div> 
        <div class="col-sm-offset-2 col-sm-1"> 
         <label class="control-label" for="row92">Label92:</label> 
        </div> 

        <div class="col-sm-1"> 
         <div class="dropdown"> 
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
    Ddown 
           <span class="caret"></span> 
          </button> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row101">Label101:</label> 
        </div> 

        <div class="col-sm-3"> 
         <input type="text" class="form-control" id="row101" 
          placeholder="Data10-1"> 
        </div> 
        <div class="col-sm-offset-2 col-sm-1"> 
         <label class="control-label" for="row10-2">Label102:</label> 
        </div> 


         <div class="col-sm-1 dropdown"> 
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
    Ddown 
           <span class="caret"></span> 
          </button> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
          </ul> 
         </div> 

       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row11-1">Label111:</label> 
        </div> 

        <div class="col-sm-3"> 
         <input type="text" class="form-control" id="row11-1" 
          placeholder="Data11-1"> 
        </div> 
        <div class="col-sm-offset-2 col-sm-1"> 
         <label class="control-label" for="row11-2">Label112:</label> 
        </div> 

        <div class="col-sm-1"> 
         <div class="dropdown"> 
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
    Ddown 
           <span class="caret"></span> 
          </button> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row12-1">Label121:</label> 
        </div> 

        <div class="col-sm-3"> 
         <input type="text" class="form-control" id="row12-1" 
          placeholder="Data12-1"> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row13-1">Label131:</label> 
        </div> 

        <div class="col-sm-4"> 
         <input type="text" class="form-control" id="row13-1" 
          placeholder="Data13-1"> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row14-1">Label141:</label> 
        </div> 

        <div class="col-sm-1"> 
         <input type="text" class="form-control" id="row14-1" 
          placeholder="Data14-1"> 
        </div> 
        <div class="col-sm-offset-1 col-sm-1"> 
         <label class="control-label" for="row14-2">Label142:</label> 
        </div> 

        <div class="col-sm-2"> 
         <input type="text" class="form-control" id="row14-2" 
          placeholder="Data14-2"> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row15-1">Label151:</label> 
        </div> 

        <div class="col-sm-8"> 
         <input type="text" class="form-control" id="row15-1" 
          placeholder="Data15-1"> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row16-1">Label161:</label> 
        </div> 

        <div class="col-sm-8"> 
         <input type="text" class="form-control" id="row16-1" 
          placeholder="Data16-1"> 
        </div> 
       </div> 

      <div class="form-group"> 
        <div class="col-sm-1"> 
         <label class="control-label" for="row17-1">Label171:</label> 
        </div> 

        <div class="col-sm-8"> 
         <textarea rows="3" class="form-control" id="row17-1" 
          placeholder="Data17-1"></textarea> 
        </div> 
       </div> 


     </form> 
    </div> 

    <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script 
     src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body> 
</html>

来源

2015-02-10 cbear

我想作为最后的手段，你可以蛮力一些CSS迫使它。向类似'form-widgets-sm'的表单添加一个类。

然后在CSS：

.form-widgets-sm label { 
    height: 15px; 
} 

.form-widgets-sm input { 
    height: 15px; 
}

，并调整有高度（显然15px的是一个占位符）。您可能还需要修改表单组和/或div列。

尽管我确信有更多的bootstrap方法可以做到这一点，但这种方法并不具有破坏性（将一个类添加到表单中），并且可以让您在等待更多引导程序时前进回答。

来源

2015-02-10 22:33:07 akaphenom

谢谢，试过它确实改变了高度，但标签的对齐方式发生了变化。也注意到填充（顶部/底部）默认为6。这也需要减少。 – cbear 2015-02-11 00:10:57

我想我会改变CSS中的所有填充。 bootstrap方法（从我的角度来看）是添加类来指定一种感觉，并且不要超过类（应用层次结构）。 – akaphenom 2015-02-11 14:43:16

自举形式 - 降低高度

回答

相关问题