0
Can anyone show me where I’m missing and my code doesn’t become responsive? (I use bootstrap)
I wish there was one element underneath the other...
Here’s the code:
<div id='container'>
<div class='input-group'>
<span class='input-group-addon' id='basic-addon1' style='width: 110px;'>Escolha</span>
<select>
<option>Laranja</option><option>Goiaba</option><option>Banana</option>
</select>
<span class='label label-success'>Escolha uma fruta</span></div>
</div>
1
Your code has some build errors, so it’s not responsive.
The first thing I noticed is that you fixed the size of the <span class="input-group-addon">, it causes some problems.
Another thing is that you’re not defining the grids to work his layout.
First you must define a <div class="row"> to mark the row and inside it you must define the columns through the <div class="col-lg-? col-md-? col-sm-? col-xs-?"> (The ? are only to represent the size of the columns, which is variable).
You also did not put the class .form-control in his <select>.
I made changes to your code.
See if that’s the way you’re looking:
/* Esse padding é apenas p/ melhorar a visualização da resposta */
body {
padding-top: 15px;
}<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="input-group">
<span class="input-group-addon">Escolha</span>
<select class="form-control">
<option>Laranja</option><option>Goiaba</option><option>Banana</option>
</select>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<span class="label label-success">Escolha uma fruta</span>
</div>
</div>
</div>Thank you so much for your help. I thought you didn’t need the grid classes because it was just a line... But I put it and it worked really well. Thanks!
Oops! Tamo together, brother!
Paulo, about the size of the span... There are 4 sets of select one below the other. The label is always the same size, but the options are not. Then it gets misaligned depending on the options I choose in each select...
I get it. Please edit your question with your updated code so I can check.
Dude. The problem is in the class I’m using: .selectpicker. When I use the one you suggested, there’s none of that. I couldn’t edit. I will respond with a picture just to you understand better, but I’ve decided that I will stop using the .selectpicker. It’s not the first time that gives me a headache... Once again, thank you and good night.
I get it. It really happens. Chill, brother!
0
That’s what I’m talking about...
The span + select set has a fixed size. But it is installed on the screen according to the option chosen... That’s why I wanted to set the span, but when I try to do this it doesn’t respond properly. Sometimes it gets bigger than I set.
Browser other questions tagged bootstrap responsive-layout
You are not signed in. Login or sign up in order to post.
I don’t remember much of all bootstrap classes, but I think there is still to add the grid system classes, in addition you have put a
width: 110px;this makes the element stay fixed, is sure that this code is the same as the image, seems to lack some things– Costamilam
Really... I forgot to put the class . selectpicker of my SELECT. As for the size fixed, if not by it gets much bigger than the label... But putting the grid classes, it worked fine. Thank you very much.
– Walter Robynson