Question

我在同一行有3个表单字段，但我无法弄清楚如何在它们之间应用一些空格（不使用margin，padding ......）我正在使用bootstrap 3。

这是表格：

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

我不知道为什么你不想使用填充或边距，这是在元素之间创建空间的通常和标准方法，但是因为你使用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

将Bootstraps Inline Forms包裹在<form class="form-inline">：

中

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

Plunker Link： Plunker View

引导表单，同一行上的字段

3 个答案:

结果