Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

We are making a Google sites where we will put a form made on Bootstrap.

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

The code its alright but the <div class="form-inline"> just work on a specific size of screen, and we need to specify that size, where should we change that?

Thank you.

            <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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
627 views
Welcome To Ask or Share your Answers For Others

1 Answer

Another way to achieve the result is to force che class "form-inline" works also with the resolution < 768px adding a simple css in your project:

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

By the way, with small width windows can occur the possibility that not all your inline components can be rendered in the same row and some last components will go on the second row (if there aren't enough space).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...