CSS Bottoni bootstrap

Albymaster

Utente Emerald
18 Giugno 2010
719
171
94
497
Ciao a tutti, sto usando bootstrap per creare una semplice pagina. In questa pagina ho vari bottoni di tipo "btn-block", che sono i bottoni che occupano il 100% della larghezza del contenitore in cui sono messi. Io ho creato una nuova tipologia chiamata "btn-block2" in cui imposto la loro larghezza a 49,7% in modo da poter mettere due bottoni sulla stessa linea che occupano comunque tutto lo spazio possibile e il risultato è questo :
Cattura.PNG
Cattura2.PNG

CSS:
.btn-block2 {
  display: inline-block;
  width: 49.7%;
}
input[type="submit"].btn-block2,
input[type="reset"].btn-block2,
input[type="button"].btn-block2 {
  width: 49.7%;
}

Premetto che il tutto è dentro il sistema di griglie di bootstrap e che se metto 50% width come valore mi vanno a capo come nella seconda immagine anche a senza diminuire la dimensione della finestra. Ho provato anche a fare una prova al di fuori delle griglie e mi da lo stesso problema. Sapete come aiutarmi in modo da evitare che i due bottoni si visualizzino come nella seconda immagine quando diminuisco la dimensione della finestra?

Grazie :)
 
L'unica soluzione immagino sia usare le query e quindi andarti a cercare a che larghezza della pagina i bottoni si mettono come nella seconda immagine e di conseguenza adattare.
 
Se vuoi che si visualizzi solamente un bottone alla volta devi lavorare suoi margini piuttosto che sul width. Io opterei sulla gestione dei width con valori percentuali e i margini tramite pixel o altre misure fisse dato che con la riduzione può causare problemi. Puoi optare anche per altre configurazioni ma, dato che sono un amante del responsive layout piuttosto che del fluid o adaptive layout, ti consiglio di risolvere il problema come ti ho detto io.
 
  • Mi piace
Reazioni: alcatrak
Ciao a tutti, sto usando bootstrap per creare una semplice pagina. In questa pagina ho vari bottoni di tipo "btn-block", che sono i bottoni che occupano il 100% della larghezza del contenitore in cui sono messi. Io ho creato una nuova tipologia chiamata "btn-block2" in cui imposto la loro larghezza a 49,7% in modo da poter mettere due bottoni sulla stessa linea che occupano comunque tutto lo spazio possibile e il risultato è questo :

CSS:
.btn-block2 {
  display: inline-block;
  width: 49.7%;
}
input[type="submit"].btn-block2,
input[type="reset"].btn-block2,
input[type="button"].btn-block2 {
  width: 49.7%;
}

Premetto che il tutto è dentro il sistema di griglie di bootstrap e che se metto 50% width come valore mi vanno a capo come nella seconda immagine anche a senza diminuire la dimensione della finestra. Ho provato anche a fare una prova al di fuori delle griglie e mi da lo stesso problema. Sapete come aiutarmi in modo da evitare che i due bottoni si visualizzino come nella seconda immagine quando diminuisco la dimensione della finestra?

Grazie :)

Penso che non ti serva nè usare un tuo CSS custom, nè implementare media-query ulteriori...
Utilizza semplicemente l'asset di classi fornito dal framework Bootstrap:
1540451379900.png

Come vedi dalla tabella, costruendo il seguente div:
HTML:
<div class="col col-xl-2 col-sm-1 col-1">
    Sono un div
</div>
Esso si imposterà come una colonna da 2 spazi quando la finestra assume un valore di pixel XL, invece, come una colonna da uno spazio singolo sugli schermi più piccoli.

Spero di esserti stato utile :)
 
Penso che non ti serva nè usare un tuo CSS custom, nè implementare media-query ulteriori...
Utilizza semplicemente l'asset di classi fornito dal framework Bootstrap:
Visualizza allegato 30771
Come vedi dalla tabella, costruendo il seguente div:
HTML:
<div class="col col-xl-2 col-sm-1 col-1">
    Sono un div
</div>
Esso si imposterà come una colonna da 2 spazi quando la finestra assume un valore di pixel XL, invece, come una colonna da uno spazio singolo sugli schermi più piccoli.

Spero di esserti stato utile :)
Ho provato come dici tu, ma non me li fa stare nella stessa riga mettendoli dentro il div come dici te. Infatti mi stanno a capo a prescindere. Tra l'altro, considerando che sono già dentro un <div class="col-sm-8">, dentro questo tag devo considerare un altra griglia di 12 colonne? Essendo una dentro l'altra. L'unico motivo per cui i bottoni che voglio mettere in riga sono "btn-block2" è che ho definito che siano di tipo "inline-block" e non semplicemente "block"
Codice:
<div class="row">
        <div class="col-sm-8">
          <form >
            <label > </label>
            <input>
            <hr>
            <input class="btn btn-warning btn-lg btn-block" >
          </form>
          <br>
          <div class="col col-xl-2 col-sm-1 col-1">
            <input class="btn btn-warning btn-lg btn-block2 ">
            <input class="btn btn-warning btn-lg btn-block2">
          </div>
          <input class="btn btn-warning btn-lg btn-block">
        </div>
        <div class="col-sm-4">
            <label></label>
            <textarea></textarea>
        </div>
      </div>
    </div>
 
Ultima modifica:
Ora come ora, hai scritto che in una riga devono starci una form, un div formattato con bootstrap e un bottone... mi sa tanto che è questo il motivo per cui non fa come desideri...
Tieni a mente che nella griglia bootstrap tutto deve stare racchiuso nei contenitori colonna, esempio:
HTML:
<div class="row">
    <div class="col-sm-8">
        <div class="col col-xl-4 col-sm-12 col-12">
            <form >
                <label > </label>
                <input>
                <hr>
                <input class="btn btn-warning btn-lg btn-block" >
            </form>
        </div>
        <div class="col col-xl-4 col-sm-12 col-12">
            <input class="btn btn-warning btn-lg btn-block2 ">
            <input class="btn btn-warning btn-lg btn-block2">
        </div>
        <div class="col col-xl-4 col-sm-12 col-12">
            <input class="btn btn-warning btn-lg btn-block">
        </div>
    </div>
    <div class="col-sm-4">
        <label></label>
        <textarea></textarea>
    </div>
</div>
</div>
Inoltre, (ora non ricordo esattamente) tu stai creando una sottoriga della colonna col-sm-8, quindi dovrai inserire quelle 3 sotto-colonne dentro una riga!
Tra l'altro, considerando che sono già dentro un <div class="col-sm-8">, dentro questo tag devo considerare un altra griglia di 12 colonne?

Esattamente
 
Ho provato come dici tu, ma non me li fa stare nella stessa riga mettendoli dentro il div come dici te. Infatti mi stanno a capo a prescindere. Tra l'altro, considerando che sono già dentro un <div class="col-sm-8">, dentro questo tag devo considerare un altra griglia di 12 colonne? Essendo una dentro l'altra. L'unico motivo per cui i bottoni che voglio mettere in riga sono "btn-block2" è che ho definito che siano di tipo "inline-block" e non semplicemente "block"
Codice:
<div class="row">
        <div class="col-sm-8">
          <form >
            <label > </label>
            <input>
            <hr>
            <input class="btn btn-warning btn-lg btn-block" >
          </form>
          <br>
          <div class="col col-xl-2 col-sm-1 col-1">
            <input class="btn btn-warning btn-lg btn-block2 ">
            <input class="btn btn-warning btn-lg btn-block2">
          </div>
          <input class="btn btn-warning btn-lg btn-block">
        </div>
        <div class="col-sm-4">
            <label></label>
            <textarea></textarea>
        </div>
      </div>
    </div>


puoi optare per diverse soluzioni... ad esempio


HTML:
<div class="row">

        <div class="col-sm-8">

          <form >

            <label > </label>

            <input>

            <hr>

            <input class="btn btn-warning btn-lg btn-block" >

          </form>

          <br>

          <div class="col-12">

            <div class="col-12 col-sm-6">
                <input class="btn btn-warning btn-lg btn-block2 ">
            </div>
            <div class="col-12 col-sm-6">
                <input class="btn btn-warning btn-lg btn-block2">
            </div>

          </div>

          <input class="btn btn-warning btn-lg btn-block">

        </div>

        <div class="col-sm-4">

            <label></label>

            <textarea></textarea>

        </div>

      </div>

    </div>

Oppure


HTML:
<div class="row">



        <div class="col-sm-8">



          <form >



            <label > </label>



            <input>



            <hr>



            <input class="btn btn-warning btn-lg btn-block" >



          </form>



          <br>



          <div class="d-inline-flex">

           <input class="btn btn-warning btn-lg btn-block2 ">
           <input class="btn btn-warning btn-lg btn-block2">

          </div>



          </div>



          <input class="btn btn-warning btn-lg btn-block">



        </div>



        <div class="col-sm-4">



            <label></label>



            <textarea></textarea>



        </div>



      </div>



    </div>