【问题标题】: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 &lt;div class="form-group"&gt; &lt;input type="text" class="form-control" id="hoszig1_nm" placeholder="20"&gt; &lt;label&gt;/nm&lt;/label&gt; &lt;/div&gt;

标签: 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>
    

    【讨论】:

      猜你喜欢
      • 2016-05-06
      • 2014-08-23
      • 2011-04-02
      • 2015-07-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-12-17
      相关资源
      最近更新 更多