Visualizzazione dei risultati da 1 a 9 su 9
  1. #1

    Bootstrap mettere 7 pulsanti sulla stessa riga

    Buongiorno a tutti.
    Utilizzando Bootstrap ho necessità di mettere sette pulsanti (ognuno dei quali non entra in col-sm-1) sulla stessa riga.
    Ovviamente non posso utilizzare col-sm-2 perché l'ultimo non entrerebbe nella riga.
    Ho provato a metterli tutti dentro un col-sm-12 (uno accanto all'altro, speravo....), ma la class=submit me li porta a capo e li ritrovo uno per riga.
    Qualcuno ha una soluzione?
    Grazie
    Marco

  2. #2
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    764
    Dipende quanto testo c'è scritto in questi sette bottoni (parliamo di "button"?).

    Qui ce ne sono 8 su una stessa riga:
    https://getbootstrap.com/docs/4.0/components/buttons/

    Dovresti dare qualche dettaglio in più. Posta del codice, così si capisce meglio qual è il tuo problema.

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, da quel che ho visto in giro, se usi Bootstrap 4 puoi ottenere delle colonne di uguale larghezza specificando semplicemente la classe col o, nel tuo caso, col-sm:
    codice:
    <div class="row">
          <div class="col-sm"></div>
          <div class="col-sm"></div>
          <div class="col-sm"></div>
          <div class="col-sm"></div>
          <div class="col-sm"></div>
          <div class="col-sm"></div>
          <div class="col-sm"></div>
    </div>
    vedi documentazione: https://v4-alpha.getbootstrap.com/la...layout-columns

    Diversamente dovresti usare qualche accrocchio per sovrascrivere in qualche modo le regole di base.

    Ad ogni modo puoi trovare delle soluzioni con qualche ricerca sul web del tipo: bootstrap 7 columns
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  4. #4
    Sono pulsanti con immagine
    Ultima modifica di marcom149; 18-06-2018 a 18:28

  5. #5
    Ecco il codice.
    Ci sono pulsanti con immagine
    codice:
    <div class="container">
      <div class="row">
    
        <div class="col-sm-12">
          <div class="panel-group">
            <div class="panel panel-default">
              <div class="panel-heading">
    
                <form name="form_cliente" method="post" id="imp2" accept-charset=utf-8 action="cmvisita.php?cli=<?PHP echo $cli ?>&paz=<?PHP echo $paz ?>&ann=<?PHP echo $ann ?>&prk=<?PHP echo $prk ?>">
                  <div class="submit" align=center><input type="image" name="commit" src=<?PHP echo "$pulscancella" ?> title=<?PHP echo "$cancella" ?> width=<?PHP echo "$pulswid" ?> height=<?PHP echo "$pulshei" ?>></div>
                </form>
                <form name="form_cliente" method="post" id="imp2" accept-charset=utf-8 action="cmvisita.php?cli=<?PHP echo $cli ?>&paz=<?PHP echo $paz ?>&ann=<?PHP echo $ann ?>&prk=<?PHP echo $prk ?>">
                  <div class="submit" align=center><input type="image" name="commit" src=<?PHP echo "$pulspaziente" ?> title=<?PHP echo "$paziente" ?> width=<?PHP echo "$pulswid" ?> height=<?PHP echo "$pulshei" ?>></div>
                </form>
                <form name="form_cliente" method="post" id="imp2" accept-charset=utf-8 action="cmvisita.php?cli=<?PHP echo $cli ?>&paz=<?PHP echo $paz ?>&ann=<?PHP echo $ann ?>&prk=<?PHP echo $prk ?>">
                  <div class="submit" align=center><input type="image" name="commit" src=<?PHP echo "$pulsanamnesi" ?> title=<?PHP echo "$anamnesi" ?> width=<?PHP echo "$pulswid" ?> height=<?PHP echo "$pulshei" ?>></div>
                </form>
                <form name="form_cliente" method="post" id="imp2" accept-charset=utf-8 action="cmvisita.php?cli=<?PHP echo $cli ?>&paz=<?PHP echo $paz ?>&ann=<?PHP echo $ann ?>&prk=<?PHP echo $prk ?>">
                  <div class="submit" align=center><input type="image" name="commit" src=<?PHP echo "$pulsvisita" ?> title=<?PHP echo "$visita" ?> width=<?PHP echo "$pulswid" ?> height=<?PHP echo "$pulshei" ?>></div>
                </form>
                <form name="form_cliente" method="post" id="imp2" accept-charset=utf-8 action="cmvisita.php?cli=<?PHP echo $cli ?>&paz=<?PHP echo $paz ?>&ann=<?PHP echo $ann ?>&prk=<?PHP echo $prk ?>">
                  <div class="submit" align=center><input type="image" name="commit" src=<?PHP echo "$pulsquestionario" ?> title=<?PHP echo "$questionario" ?> width=<?PHP echo "$pulswid" ?> height=<?PHP echo "$pulshei" ?>></div>
                </form>
                <form name="form_cliente" method="post" id="imp2" accept-charset=utf-8 action="cmvisita.php?cli=<?PHP echo $cli ?>&paz=<?PHP echo $paz ?>&ann=<?PHP echo $ann ?>&prk=<?PHP echo $prk ?>">
                  <div class="submit" align=center><input type="image" name="commit" src=<?PHP echo "$pulsanalisi" ?> title=<?PHP echo "$analisi" ?> width=<?PHP echo "$pulswid" ?> height=<?PHP echo "$pulshei" ?>></div>
                </form>
                <form name="form_opp" method="post" id="imp2" accept-charset=utf-8 action="<?PHP echo $wpgm ?>?opk=<?PHP echo $opk ?>&cli=<?PHP echo $cli ?>&dip=<?PHP echo $dip ?>&ann=<?PHP echo $ann ?>&mes=<?PHP echo $mes ?>">
                  <div class="submit" align=center><input name="invia" type="image" src=<?PHP echo "$pulsindietro" ?> title=<?PHP echo "$indietro" ?> width=<?PHP echo "$pulswid" ?> height=<?PHP echo "$pulshei" ?> > </div>
                </form>
    
              </div>
            </div>
          </div>
        </div>
    
    
      </div>
    </div>

  6. #6
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    764
    Posta un link, se ti è possibile.
    C'è del codice lato server che non permette di vedere l'output inviato al browser.

  7. #7
    Ecco il link:
    http://www.mamavisoftware.it/centrimir/provabottoni.php
    (spero di aver capito cosa mi hai chiesto)

  8. #8
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    764
    Quote Originariamente inviata da marcom149 Visualizza il messaggio
    Ecco il link:
    http://www.mamavisoftware.it/centrimir/provabottoni.php
    (spero di aver capito cosa mi hai chiesto)
    OK, poi lo guardo con calma.
    Per adesso, la prima cosa che mi viene in mente è quella di suggerirti di non usare le immagini, ma delle icone tipo font awesome o simili, ma solo per dare un aspetto più "moderno" al tutto.

  9. #9
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    783
    Secondo me la soluzione migliore è quella di Killerworm, ti facilita anche la possibilità di rendere tutto responsive, però devi aggiornare bootstrap alla versione 4, tu stai usando le 3 e quel tipo di colonne non mi sembra che siano supportate.

    Concettualmente puoi fare la stessa cosa impostando il container che è "panel-heading" come "display: flex"
    E impostando tutti i singoli form come "flex: 1", però occhio che se vuoi farlo responsive devi lavorarci un po'.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.