文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap表单处理

问Bootstrap表单处理
EN

Stack Overflow用户

提问于 2017-03-13 21:13:24

回答 2查看 57关注 0票数 1

我对bootstrap中的表单处理有一个问题。你能帮我一下吗？

所以我的问题是元素的间距，我没有找到一个好的解决方案。我尝试了水平形式，但它使跨度下降到一条新线。使用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>

css

html

twitter-bootstrap-3

回答 2

Stack Overflow用户

发布于 2017-03-13 21:25:46

您可以使用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>

票数 0

Stack Overflow用户

发布于 2017-03-13 21:27:37

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

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42764572

复制

相似问题

问Bootstrap表单处理
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap表单处理EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap表单处理
EN