Bootstrap 表格，字段在同一行

Question

我在同一行有 3 个表单字段，但我不知道如何在它们之间应用一些 space（不使用边距、填充...）我正在使用 bootstrap 3.

这是表格：

my form

HTML:

        <div class="container">
<h3>Crie seu anúncio!</h3>
    <div class="row">
        <div class="col-sm-12">
        <form method="post" action="" enctype="multipart/form-data">
            <div class="panel panel-default">
                <div class = "panel-heading">
                    Informações de Contato 
                </div>
                <div class = "panel-body">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" 
                        id="id_{{ anuncioForm.nome_contato.name }}" 
                        name="{{ anuncioForm.nome_contato.name }}"
                        placeholder="Nome">
                    </div>
                    <p class="help-text">{{ anuncioForm.nome_contato.help_text }} </p>
                    <br>

                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                        <input type="text" class="form-control" 
                        id="id_{{ anuncioForm.email_contato.name }}" 
                        name="{{ anuncioForm.email_contato.name }}"
                        placeholder="E-mail">
                    </div>
                    <p class="help-text">{{ anuncioForm.email_contato.help_text }} </p>
                    <br>

                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-glyphicon glyphicon-phone"></i></span>
                        <input type="text" class="form-control" 
                        id="id_{{ anuncioForm.telefone_contato.name }}" 
                        name="{{ anuncioForm.telefone_contato.name }}"
                        placeholder="Telefone ou Celular">
                    </div>
                    <p class="help-text">{{ anuncioForm.telefone_contato.help_text }} </p>
                    <br>
                </div>
            </div>

            <div class="panel panel-default">
                <div class = "panel-heading">
                    Informações do Anúncio 
                </div>
                <div class = "panel-body">

                    <div class="input-group">
                        <span class="input-group-addon"><label>{{ anuncioForm.titulo.label }}</label></span> 
                        <input type="text" class="form-control" 
                        id="id_{{ anuncioForm.titulo.name }}" 
                        name="{{ anuncioForm.titulo.name }}">
                    </div>
                    <p class="help-text">{{ anuncioForm.titulo.help_text }} </p>
                    <br>

                    <label class="control-label">{{anuncioForm.tipo_anuncio.label}}</label>
                    <select class="form-control control-label" 
                    id="id_{{ anuncioForm.tipo_anuncio.name }}" 
                    name="anuncioForm.tipo_anuncio.name">
                        <option value="" selected="selected">---------</option>
                        <option value="Venda">Venda</option>
                        <option value="Aluguel">Aluguel</option>
                        <option value="Aluguel e Venda">Aluguel e Venda</option>
                    </select>
                    <br>

                    <div class="input-group">
                        <input id="id_imagem_principal" 
                        name="anuncioForm.imagem_principal.name" 
                        type="file">
                    </div>
                    <p>Esta será a imagem de capa do seu anúncio</p>
                    <br>
                </div>
            </div>

            <div class="panel panel-default">
                <div class = "panel-heading">
                    Informações do Imóvei 
                </div>
                <div class = "panel-body">
                    <div class="input-group">
                        <span class="input-group-addon"><label>{{ anuncioForm.titulo.label }}</label></span>
                        <input class="form-control" id="name" name="name" placeholder="Name" type="text"/>
                        <span class="input-group-addon"><label>{{ anuncioForm.titulo.label }}</label></span>
                        <input class="form-control" id="name" name="name" placeholder="Name" type="text"/>
                        <span class="input-group-addon"><label>{{ anuncioForm.titulo.label }}</label></span>
                        <input class="form-control" id="name" name="name" placeholder="Name" type="text"/>
                    </div>
                </div>
                </div>
            </div>
        </form>
        </div>
    </div>
</div>

那么，我该如何分隔字段？

Answer 1

我不知道您为什么不想使用填充或边距，这是在元素之间创建 space 的常用标准方法，但由于您使用的是 Bootstrap，您可以将字段嵌套在网格系统中，如下所示：

<div class = "panel-body">
    <div class="input-group">
        <div class="col-md-4">
            <span class="input-group-addon"><label>{{ anuncioForm.titulo.label }}</label></span>
            <input class="form-control" id="name" name="name" placeholder="Name" type="text"/>
        </div>
        <div class="col-md-4">
            <span class="input-group-addon"><label>{{ anuncioForm.titulo.label }}</label></span>
            <input class="form-control" id="name" name="name" placeholder="Name" type="text"/>
        </div>
        <div class="col-md-4">
            <span class="input-group-addon"><label>{{ anuncioForm.titulo.label }}</label></span>
            <input class="form-control" id="name" name="name" placeholder="Name" type="text"/>
        </div>
    </div>
</div>

我会提醒你，Bootstrap 使用填充来分隔每一列，所以你真的不能不使用它。

Answer 2

通过将它们包裹在 <form class="form-inline">:

中来使用 Bootstraps Inline Forms

<div class="panel panel-default">
  <div class = "panel-heading">
    Informações do Imóvei 
  </div>
  <div class="panel-body">
    <form class="form-inline">
        <div class="input-group">
          <span class="input-group-addon"><label>{{ anuncioForm.titulo.label }}</label></span>
          <input class="form-control" id="name" name="name" placeholder="Name" type="text"/>
        </div>         
        <div class="input-group">
          <span class="input-group-addon"><label>{{ anuncioForm.titulo.label }}</label></span>
          <input class="form-control" id="name" name="name" placeholder="Name" type="text"/>
        </div>
        <div class="input-group">
          <span class="input-group-addon"><label>{{ anuncioForm.titulo.label }}</label></span>
          <input class="form-control" id="name" name="name" placeholder="Name" type="text"/>
        </div>
    </form>    
  </div>
</div>

结果

Answer 3

您可以使用 CSS display: flex，但填充是属性完成的工作。

<body ng-controller="MainCtrl">
  <div class="panel panel-default">
    <div class="panel-heading">
      Informações do Imóvel 
    </div>
    <div class="flex-container">
      <div class="input-group flex-item">
        <span class="input-group-addon">
          <label>Título</label>
        </span>
        <input class="form-control" id="name" name="name" placeholder="Name" type="text" />
     </div>
     <div class="input-group flex-item">
       <span class="input-group-addon">
         <label>Título</label>
       </span>
       <input class="form-control" id="name" name="name" placeholder="Name" type="text" />
     </div>
     <div class="input-group flex-item">
       <span class="input-group-addon">
         <label>Título</label>
       </span>
       <input class="form-control" id="name" name="name" placeholder="Name" type="text" />
     </div>
  </div>
</body>

和 CSS:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.flex-item {
  justify-content: center;
  width: 33.3%;
  padding: 10px;
}

笨蛋 Link: Plunker View

Bootstrap 表格，字段在同一行

Bootstrap form, fields on the same line

html

frontend

twitter-bootstrap-3

结果