How to make bootstrap class = "form-inline" work with permissions <768px

Question

We create Google sites on which we will place the form created in Bootstrap.

The width we have to put in the form is 500px;

The code is fine, but <div class="form-inline">it only works with a specific screen size, and we need to specify this size, where should we change it?

Thanks.

            <div class="form-group">
                <div class="form-inline">
                    <div class="form-group">
                        <label class="sr-only" for="Inputtel">Telefone</label>
                        <input type="tel" class="form-control" id="Inputtel" placeholder="Telefone">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="InputCPFCNPJ">CPF ou CNPJ</label>
                        <input type="number" class="form-control" id="InputCPFCNPJ" placeholder="CPF ou CNPJ">
                    </div>
                </div>
            </div>

Answer 1

in bootstrap 3 you can use grid options for this. Is it correct that you need inputs on a single line? This way you can solve your problem with col-xs-6. or you can use a smaller input with col-xs-4. check him;)

<div class="form-inline">
                <div class="form-group col-xs-6">
                    <label class="sr-only" for="Inputtel">Telefone</label>
                    <input type="tel" class="form-control" id="Inputtel" placeholder="Telefone">
                </div>
                <div class="form-group col-xs-6">
                    <label class="sr-only" for="InputCPFCNPJ">CPF ou CNPJ</label>
                    <input type="number" class="form-control" id="InputCPFCNPJ" placeholder="CPF ou CNPJ">
                </div>
            </div>

Answer 2

, "form-inline" che class < 768px css :

@media (max-width: 767px) {
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
}
@media (max-width: 767px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
}

, , , ( ).

Answer 3

, , @Rancid,

display: inline-block

display: inline-table

. , .