Bootstrap και θέμα με resize σε φόρμα

[rafinos]

Γεια σας παιδιά!

 

Έχω την παρακάτω φόρμα, όπως φαίνεται στην πρώτη εικόνα.

 

Ο κώδικας με τον οποίο δημιουργείται είναι ο παρακάτω.

<div class='text-center col-sm-8 col-sm-offset-2'>
<?php

if(count($votes) > 0){
				echo "<form name='form' id='form' action='update_author_votes.php' method='post' role='form' class='form-horizontal' style='margin: 0 auto;'>";
foreach($votes as $temp){
?>
	<div class="row">
		<div class="col-sm-9">	
			<input type="text" name="choices[]" class="form-control" autocomplete="off" placeholder="" value="<?php echo htmlspecialchars($temp['title'], ENT_QUOTES, "UTF-8"); ?>" />
		</div>
		<div class="col-sm-3">
			<div class="input-group">
				<input type="text" name="rates[]" class="form-control" autocomplete="off" placeholder="" value="<?php echo $temp['rate']; ?>" />
				<div class="input-group-btn">
					<button type="button" class="btn btn-danger remove_title">X</button>
				</div>
			</div>
		</div>
	</div>
<?php
}

}
?>
</div>

#form{
	max-width: 600px;
}

Το πρόβλημα μου είναι το εξής... στο resize γίνεται αυτό που φαίνεται στη δεύτερη εικόνα.

Υπάρχει τρόπος να το αποφύγω και να παραμένουν τα πεδία το ένα δίπλα στο άλλο όπως είναι αρχικά;

 

 

[lion2486]

βάλε στο parent container width η min-width ώστε να χωράνε σε μια σειρά. Αντιλαμβάνεσαι φαντάζομαι ότι όταν είναι μικρότερο το παράθυρο θα υπάρχει scrollbar.

[XPHSTOS_]

Πρόσθεσε τις κλάσεις .col-xs-9 & .col-xs-3 στα αντίστοιχα divs.

Κάπως έτσι: http://codepen.io/xphstos/full/EgYrjX/

Επεξ/σία 31 Αυγούστου 2016 από XPHSTOS_

[rafinos]

Πρόσθεσε τις κλάσεις .col-xs-9 & .col-xs-3 στα αντίστοιχα divs.

 

Κάπως έτσι: http://codepen.io/xphstos/full/EgYrjX/

Αυτό δούλεψε! Thanks!

 

Μήπως πρέπει να κάνω και το parent div xs (είναι sm),  ή δεν υπάρχει θέμα;

[XPHSTOS_]

Αυτό δούλεψε! Thanks!

 

Μήπως πρέπει να κάνω και το parent div xs (είναι sm),  ή δεν υπάρχει θέμα;

Στην ουσία το xs σημαίνει extra small οπότε αν κάτι το θέλεις μέχρι την μικρότερη δυνατή διάσταση να παραμένει ως έχει τότε βάλτο.

Ειδικά αν δεν συμπεριφέρεται όπως θέλεις.

 

Πάντως γενικά κατέβαινε μέχρι 320px σε διάσταση γιατί πολλά κινητά πχ. iPhone 5 τρέχουν με τέτοια ανάλυση.

 

Συγκεκριμένα στο παράδειγμα σου σε 320px είναι λίγο μικρά τα δεξιά inputs.

Εγώ θα τα έδινα ένα col ακόμη αλλά μόνο στην xs ανάλυση.

Δες πάλι το codepen και θα καταλάβεις.

[rafinos]

Στην ουσία το xs σημαίνει extra small οπότε αν κάτι το θέλεις μέχρι την μικρότερη δυνατή διάσταση να παραμένει ως έχει τότε βάλτο.

Ειδικά αν δεν συμπεριφέρεται όπως θέλεις.

 

Πάντως γενικά κατέβαινε μέχρι 320px σε διάσταση γιατί πολλά κινητά πχ. iPhone 5 τρέχουν με τέτοια ανάλυση.

 

Συγκεκριμένα στο παράδειγμα σου σε 320px είναι λίγο μικρά τα δεξιά inputs.

Εγώ θα τα έδινα ένα col ακόμη αλλά μόνο στην xs ανάλυση.

Δες πάλι το codepen και θα καταλάβεις.

Ακριβώς αυτό που είπες έκανα... έδωσα ένα col δεξιά.

Έχω τη δυνατότητα να βάλω και "col-sm-3" και "col-xs-4" ταυτόχρονα;

 

Στην περίπτωση του pc πάντως νομίζω ότι συνεχίζει να κρατάει το "xs".

[XPHSTOS_]

Ναι, μπορείς και για την ακρίβεια γιαυτό υπάρχουν... για να μπορείς να κάνεις responsive το περιεχόμενο σου.

Δηλαδή μπορεί την φόρμα να την θέλεις 9-3 στο laptop/desktop 8-4 tablet/mobile και 6-6 στο extra small.

Δες καλύτερα εδώ για να καταλάβεις καλύτερα:

http://getbootstrap.com/css/#grid-options