1

Tenho a seguinte estrutura HTML:

<div class="col-xs-4">
    <div class="form-group">
        <label for="vencimentoBolsa">Vencimento:</label>
        <input type="text" class="form-control" name="dtVencimento" placeholder="Vencimento" required>
    </div>
    <div class="form-group">
        <label for="volumeBolsa">Volume:</label>
        <input type="text" class="form-control" name="volumeBolsa" placeholder="Volume" required>
    </div>
    <div class="form-group">
        <label for="unidadeVolume">Unidade Volume:</label>
        <select class="selectpicker" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
    </div>
</div>

A estrutura anterior fica do seguinte jeito: inserir a descrição da imagem aqui

Porém eu gostaria que ficasse do jeito jeito: inserir a descrição da imagem aqui

Já tentei fazer do jeito:

<div class="col-xs-4">
    <div class="form-group">
        <label for="vencimentoBolsa">Vencimento:</label>
        <input type="text" class="form-control" name="dtVencimento" placeholder="Vencimento" required>
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <label for="volumeBolsa">Volume:</label>
            <input type="text" class="form-control" name="volumeBolsa" placeholder="Volume" required>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <label for="unidadeVolume">Unidade Volume:</label>
            <select class="selectpicker" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
                <option selected disabled>Escolha uma opção</option>
                <option>Mililitro</option>
                <option>Litro</option>
            </select>
        </div>
    </div>
</div>

Mas fica uma margem na esquerda e na direita dos inputs.

1
  • coloca um id específico nesse que vc quer que fique em linha, depois muda os requisitos de flutuação dele 24/09/2017 às 16:57

1 Resposta 1

1

Utilize GridSystem para posicionar seus elementos, o total de colunas são 12, exemplo:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-4 col-xs-4">
    <div class="form-group">
      <label for="unidadeVolume">Grupo:</label>
      <select class="form-control" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
    </div>
  </div>
  <div class="col-md-4 col-xs-4">
    <div class="form-group">
      <label for="volumeBolsa">Vencimento:</label>
      <input type="text" class="form-control" name="volumeBolsa" placeholder="Volume" required>
    </div>
  </div>
  <div class="col-md-4 col-xs-4">
    <div class="form-group">
      <label for="unidadeVolume">Status:</label>
      <select class="form-control" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
    </div>
  </div>
</div>
</div>
<!--next-->
<div class="row">
  <div class="col-md-4 col-xs-4">
    <div class="form-group">
      <label for="unidadeVolume">Grupo:</label>
      <select class="form-control" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
    </div>
  </div>
  <div class="col-md-2 col-xs-2">
    <div class="form-group">
      <label for="volumeBolsa">Volume:</label>
      <input type="text" class="form-control" name="volumeBolsa" placeholder="Volume" required>
    </div>
  </div>
  <div class="col-md-2 col-xs-2">
    <div class="form-group">
      <label for="unidadeVolume">Un. Volume:</label>
      <select class="form-control" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
    </div>
    <div class="col-md-6 col-xs-6">
    </div>
  </div>
</div>
  <!--next-->
  <div class="row">
    <div class="col-md-4 col-xs-4">
      <div class="form-group">
        <label for="unidadeVolume">Grupo:</label>
        <select class="form-control" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
      </div>
    </div>
    <div class="col-md-2 col-xs-2">
     
    </div>
    <div class="col-md-2 col-xs-2">
     
    </div>
    <div class="col-md-6 col-xs-6">
     
    </div>
  </div>
  

Referencia: Grid system

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .