引导表单处理答案

【问题标题】：Bootstrap form handling引导表单处理
【发布时间】：2017-03-13 21:27:36
【问题描述】：

我对引导程序中的表单处理有疑问。你能帮帮我吗？

所以我的问题是元素的间距，我没有找到一个好的解决方案。我尝试了水平形式，但它将跨度降低到新的一行。使用 gentella。

<body>
    <div id="wrapper">
    <div id="page-wrapper">

        <div class="container-fluid">

            <!-- Page Heading -->
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">
                        Kalkulátor
                    </h1>
                    <!--   <ol class="breadcrumb">
                    <li>
                    <i class="fa fa-dashboard"></i>  <a href="index.html">Dashboard</a>
                    </li>
                    <li class="active">
                    <i class="fa fa-edit"></i> Forms
                    </li>
                    </ol> -->
                </div>
            </div>
            <form class="form-inline" action="/kalkulator.php">
                <div class="form-group">
                    <label class="control-label" for="hoszig1_nm">Input first:</label>
                    </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="hoszig1_nm" placeholder="20"> 
                </div>
                <div class="form-group">
                    <span>/nm</span>
                </div>
                <div class="form-group">
                    <select class="form-control">
                        <option>2</option>
                        <option>4</option>
                        <option>6</option>
                        <option>8</option>
                        <option>10</option>
                    </select>
                </div>  
                <div class="form-group">
                    <span>/cm</span>
                </div> 
                <div class="form-group">
                    <select class="form-control">
                        <option>Normál</option>
                        <option>Grafit</option>
                        <option>Kőzetgyapot</option>
                    </select>
                </div>
                <div class="form-group">
                    <span>Típusú</span>
                </div>
                </br>
                </br>
                <div class="form-group">
                    <label class="control-label" for="hoszig1_nm">Other input:</label>
                    <input type="text" class="form-control" id="hoszig1_nm" placeholder="20"> 
                </div>
                <div class="form-group">
                    <span>/nm</span>
                </div>
                <div class="form-group">
                    <select class="form-control">
                        <option>2</option>
                        <option>4</option>
                        <option>6</option>
                        <option>8</option>
                        <option>10</option>
                    </select>
                </div>  
                <div class="form-group">
                    <span>/cm</span>
                </div> 
                <div class="form-group">
                    <select class="form-control">
                        <option>Normál</option>
                        <option>Grafit</option>
                        <option>Kőzetgyapot</option>
                    </select>
                </div>
                <div class="form-group">
                    <span>Típusú</span>
                </div>
                </br>
                </br>

【问题讨论】：

a span 元素通常使用其宽度的 100% 尝试使用 div 标签代替，或者在输入后使用标签但在相同的 form-group 中。所以对于你的 /nm <div class="form-group"> <input type="text" class="form-control" id="hoszig1_nm" placeholder="20"> <label>/nm</label> </div>

标签： css html twitter-bootstrap-3

【解决方案1】：

您可以使用 row 和 col-xx-xx 类。链接到文档here。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<br/>
<form class="form-inline" action="/kalkulator.php">
  <div class="row">
    <div class="form-group">
      <div class="col-xs-4">
        <label class="control-label" for="hoszig1_nm">Input first:</label>
      </div>
      <div class="col-xs-6">
        <input type="text" class="form-control" id="hoszig1_nm" placeholder="20"> 
      </div>
      <div class="col-xs-2">
        <span>/nm</span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <div class="col-xs-offset-4 col-xs-6">
        <select class="form-control">
            <option>2</option>
            <option>4</option>
            <option>6</option>
            <option>8</option>
            <option>10</option>
        </select>
      </div>
      <div class="col-xs-2">
        <span>/cm</span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <div class="col-xs-offset-4 col-xs-6">
        <select class="form-control">
            <option>Normál</option>
            <option>Grafit</option>
            <option>Kőzetgyapot</option>
        </select>
      </div>
      <div class="col-xs-2">
        <span>Típusú</span>
      </div>
    </div>
  </div>
  <br/>
  <br/>
  <div class="row">
    <div class="form-group">
      <div class="col-xs-4">
        <label class="control-label" for="hoszig1_nm">Other input:</label>
      </div>
      <div class="col-xs-6">
        <input type="text" class="form-control" id="hoszig1_nm" placeholder="20"> 
      </div>
      <div class="col-xs-2">
        <span>/nm</span>
      </div>
    </div>
  </div>
  
  ...
  
</form>

【讨论】：

【解决方案2】：

这是您的代码示例，但标签显示在输入字段的末尾

<div class="form-group">
   <label class="control-label" for="hoszig1_nm">Input first:</label>
</div>
<div class="form-group">
   <input type="text" class="form-control" id="hoszig1_nm" placeholder="20">
   <label>/nm</label>
</div>
<div class="form-group">
   <select class="form-control">
       <option>2</option>
       <option>4</option>
       <option>6</option>
       <option>8</option>
       <option>10</option>
   </select>
   <span>/cm</span>
</div>
<div class="form-group">
   <select class="form-control">
       <option>Normál</option>
       <option>Grafit</option>
       <option>Kőzetgyapot</option>
    </select>
    <span>Típusú</span>
</div>

【讨论】：