How to adjust size of Select in Bootstrap?

1

I'm learning Bootstrap to make a simple page and want to increase the size of my Select . Look at the current code:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h3>Selecione o Estabelecimento:</h3>
            <select class="form-control" id="comboEstabelecimento">
                    <option value="2017053290201706130726082"></option>
                    <option value="2605006453163">CAPS CUPIRA </option>
                    <option value="2605002631393">CENTRO DE SAUDE </option>
                    <option value="2605006934323">CEO CUPIRA</option>
                    <option value="2605007720475">DEPARTAMENTO DE VIGILANCIA AMBIENTAL</option>
                    <option value="2605007559267">DEPARTAMENTO DE VIGILANCIA SANITARIA</option>
                    <option value="2605006341845">ESF CAIXA DAGUA </option>
                    <option value="2605002631520">ESF CHA DAS PANELAS </option>
                    <option value="2605006118143">ESF COHAB </option>
                    <option value="2605006341802">ESF DA GLORIA </option>
                    <option value="2605002631482">ESF LAJE DE SAO JOSE</option>
                    <option value="2605002631504">ESF MUTIRAO </option>
                    <option value="2605002631458">ESF NOVO HORIZONTE</option>
                    <option value="2605002631512">ESF PRESIDENTE VARGAS </option>
                    <option value="2605002631490">ESF SAMBAQUIM </option>
                    <option value="2605002354845">HOSPITAL MUNICIPAL JOSE VERISSIMO DE SOUZA</option>
                    <option value="2605007735367">LABORATORIO DE PROTESE SPDENTE</option>
                    <option value="2605006359558">NASF</option>
                    <option value="2605007528183">POLO ACADEMIA DAS CIDADES DE CUPIRA </option>
                    <option value="2605006134149">SAMU</option>
                    <option value="2605006470033">SECRETARIA MUNICIPAL DE SAUDE DE CUPIRA </option>
            </select>
        </div>
    </div>
</div>

See how it looks on the screen:

The component gets smaller than the text inside. How to correct?

Note: I am filling this data dynamically using C#

    
asked by anonymous 10.07.2017 / 01:47

1 answer

4

You can use CSS width to fix this.

#comboEstabelecimento{
 width:auto;   
}
<h3>Selecione o Estabelecimento:</h3>
<select class="form-control" id="comboEstabelecimento">
    <option value="2017053290201706130726082"></option>
    <option value="2605006453163">CAPS CUPIRA </option>
    <option value="2605002631393">CENTRO DE SAUDE </option>
    <option value="2605006934323">CEO CUPIRA</option>
    <option value="2605007720475">DEPARTAMENTO DE VIGILANCIA AMBIENTAL</option>
    <option value="2605007559267">DEPARTAMENTO DE VIGILANCIA SANITARIA</option>
    <option value="2605006341845">ESF CAIXA DAGUA </option>
    <option value="2605002631520">ESF CHA DAS PANELAS </option>
    <option value="2605006118143">ESF COHAB </option>
    <option value="2605006341802">ESF DA GLORIA </option>
    <option value="2605002631482">ESF LAJE DE SAO JOSE</option>
    <option value="2605002631504">ESF MUTIRAO </option>
    <option value="2605002631458">ESF NOVO HORIZONTE</option>
    <option value="2605002631512">ESF PRESIDENTE VARGAS </option>
    <option value="2605002631490">ESF SAMBAQUIM </option>
    <option value="2605002354845">HOSPITAL MUNICIPAL JOSE VERISSIMO DE SOUZA</option>
    <option value="2605007735367">LABORATORIO DE PROTESE SPDENTE</option>
    <option value="2605006359558">NASF</option>
    <option value="2605007528183">POLO ACADEMIA DAS CIDADES DE CUPIRA </option>
    <option value="2605006134149">SAMU</option>
    <option value="2605006470033">SECRETARIA MUNICIPAL DE SAUDE DE CUPIRA</option>
</select>

See working at jsfiddle .

    
10.07.2017 / 02:12