Can someone show me where I'm wrong and my code does not become responsive? (use bootstrap)
I wanted to keep one element underneath the other ...
Here is 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>
Your code has some construction errors, so it is not responsive.
The first thing I noticed is that you fixed the size of <span class="input-group-addon"> , this causes some problems.
Another thing is that you are not setting grids to work on your layout .
First you must set a <div class="row"> to mark the line and within it you must define the columns by <div class="col-lg-? col-md-? col-sm-? col-xs-?"> (The ? are just to represent the size of the columns, which is variable).
You also have not put the .form-control class in your <select> .
I've made changes to your code.
See if that's what you're looking for:
/* 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>That's what I was talking about ...
The span + select set has a fixed size. But sambando on the screen according to the chosen option ... So I wanted to set the span, but when I try to do this it does not respond properly. Sometimes it gets even bigger than I define.