Έχω ένα απλό demo εδώ:
<ul>
<li>One <input class="btn pull-right" value="test"></li>
<li>Two <input class="btn pull-right" value="test2"></li>
</ul>
Έχω μια μη διατεταγμένη λίστα και για κάθε στοιχείο της λίστας επιθυμώ να έχω κείμενο στα αριστερά και στη συνέχεια ένα κουμπί ευθυγραμμισμένο στα δεξιά. Προσπάθησα να χρησιμοποιήσω το pull-right αλλά αυτό μπερδεύει εντελώς την στοίχιση. Τι κάνω λάθος;
Εισάγετε το pull-right
στο χαρακτηριστικό class και αφήστε το bootstrap να τακτοποιήσει τα κουμπιά.
Για Bootstrap 2.3, δείτε: http://getbootstrap.com/2.3.2/components.html#misc > Βοηθητικές κλάσεις > .pull-right.
Για Bootstrap 3, δείτε: https://getbootstrap.com/docs/3.3/css/#helper-classes > Βοηθητικές κλάσεις.
Για Bootstrap 4, βλέπε: https://getbootstrap.com/docs/4.0/utilities/float/#responsive
Η εντολή pull-right
αφαιρέθηκε και αντικαταστάθηκε με float-right
ή γενικά με float-{sm,md,lg,xl}-{left,right,none}
<ul>
<li class="span4">One <input class="btn btn-small" value="test"></li>
<li class="span4">Two <input class="btn btn-small " value="test2"</li>
</ul>
Απλά χρησιμοποίησα το layout..apply styles for li..
ή
<ul>
<li>One <input class="btn" value="test"></li>
<li>Two <input class="btn" value="test2"</li>
</ul>
σε CSS
li {
line-height: 20px;
margin: 5px;
padding: 2px;
}
Μπορείτε να δοκιμάσετε ένα προσαρμοσμένο CSS εκτός του bootstrap CSS για να δείτε αν αλλάζει κάτι. Δοκιμάστε το
.move-rigth{
display: block;
float: right;
}
Αν δουλέψει τότε μπορείτε να δοκιμάσετε να χειριστείτε αυτό που έχετε ή να προσθέσετε άλλες μορφοποιήσεις σε αυτό και να πετύχετε αυτό που επιθυμείτε. Επειδή χρησιμοποιείτε bootstrap δεν σημαίνει ότι αν δεν σας προσφέρει αυτό που θέλετε τότε απλά το διαχειρίζεστε. Εργάζεστε με τους κώδικες σας και έτσι το διατάζετε να κάνει αυτό που λέτε. Στην υγειά μας!