Wie werden die Schieberegler auf einem Panel mit Bootstrap ausgerichtet?

Question

Ich habe eine control panel mit 6 Schieberegler darauf (durch Bootstrap-Slider implementiert), aber diese 6 Schieberegler scheinen unterschiedlich mit unterschiedlicher Fenstergröße auszurichten: manchmal 4 + 2 und manchmal 2 + 2 + 2. Ich habe keine Ahnung, was ein gut aussehendes Bedienfeld ist, aber meiner Meinung nach ist es nicht elegant. Ich will nicht, dass sie "zufällig" driften, wie this, was soll ich tun?

HTML:

<div class="container" id="appDiv"> 
    <div class="row"> 
    <div class="col" id="controlPanel"> 
     <div id="sliders"> 
     <!-- Slide bars --> 
     <div class="row"> 
      <div class="slider col-sm-4"> 
      <label for="mySamples" class="slideLables">Samples \(N=2^q \)</label> 
      <input id="mySamples" min="2" max="10" value="6" step="1" class="sliderBars"> 
      <span id="samplesSliderVal" class="sliderVal"></span> 
      </div> 

      <div class="slider col-sm-4"> 
      <label for="myPhase" class="slideLables">Phase \(\phi \)</label> 
      <input id="myPhase" data-slider-min="-4.99" data-slider-max="4.99" data-slider-value="0" data-slider-step="0.01" class="sliderBars"> 
      <span id="phaseSliderVal" class="sliderVal"></span> 
      </div> 

      <div class="slider col-sm-4"> 
      <label for="b1" class="slideLables">Amplitude \(b_1 \)</label> 
      <input id="b1" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars"> 
      <span id="b1SliderVal" class="sliderVal"></span> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="slider col-sm-4"> 
      <label for="b3" class="slideLables">Amplitude \(b_3 \)</label> 
      <input id="b3" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars"> 
      <span id="b3SliderVal" class="sliderVal"></span> 
      </div> 

      <div class="slider col-sm-4"> 
      <label for="b5" class="slideLables">Amplitude \(b_5 \)</label> 
      <input id="b5" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars"> 
      <span id="b5SliderVal" class="sliderVal"></span> 
      </div> 

      <div class="slider col-sm-4"> 
      <label for="b7" class="slideLables">Amplitude \(b_7 \)</label> 
      <input id="b7" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars"> 
      <span id="b7SliderVal" class="sliderVal"></span> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS:

#appDiv { 
    margin-top: 20px; 
    background-image: linear-gradient(to bottom, rgb(193, 193, 193) 0px, rgb(210, 210, 210) 100%); 
    text-align: center; 
} 

.slider { 
    margin-top: 10px; 
    margin-left: 15px; 
} 

.sliderBars { 
    margin-left: 10px; 
} 

.sliderVal { 
    width: 10px; 
    margin-left: 10px; 
} 

JS:

var sampleSlider = $('#mySamples').bootstrapSlider({}); 
var phaseSlider = $('#myPhase').bootstrapSlider({}); 
var b1Slider = $('#b1').bootstrapSlider(); 
var b3Slider = $('#b3').bootstrapSlider(); 
var b5Slider = $('#b5').bootstrapSlider(); 
var b7Slider = $('#b7').bootstrapSlider(); 
var nSample = Math.pow(2, sampleSlider.bootstrapSlider('getValue')); 
var phase = phaseSlider.bootstrapSlider('getValue'); 
var b1 = b1Slider.bootstrapSlider('getValue'); 
var b3 = b3Slider.bootstrapSlider('getValue'); 
var b5 = b5Slider.bootstrapSlider('getValue'); 
var b7 = b7Slider.bootstrapSlider('getValue'); 

// Interactive interfaces 
sampleSlider.bootstrapSlider({ 
    formatter: function(value) { 
    return Math.pow(2, value); 
    } 
}); 

sampleSlider.on('slideStop', function() { 
    nSample = Math.pow(2, sampleSlider.bootstrapSlider('getValue')); // Change "global" value 

    $('#samplesSliderVal').text(nSample) 
}); 

phaseSlider.on('slideStop', function() { 
    phase = phaseSlider.bootstrapSlider('getValue'); // Change "global" value 

    $('#phaseSliderVal').text(phase) 
}); 

b1Slider.on('slideStop', function() { 
    b1 = b1Slider.bootstrapSlider('getValue'); // Change "global" value 

    $('#b1SliderVal').text(b1) 
}); 

b3Slider.on('slideStop', function() { 
    b3 = b3Slider.bootstrapSlider('getValue'); // Change "global" value 

    $('#b3SliderVal').text(b3) 
}); 

b5Slider.on('slideStop', function() { 
    b5 = b5Slider.bootstrapSlider('getValue'); // Change "global" value 

    $('#b5SliderVal').text(b5) 
}); 

b7Slider.on('slideStop', function() { 
    b7 = b7Slider.bootstrapSlider('getValue'); // Change "global" value 

    $('#b7SliderVal').text(b7) 
}); 

$('#samplesSliderVal').text(nSample); 
$('#phaseSliderVal').text(phase); 
$('#b1SliderVal').text(b1); 
$('#b3SliderVal').text(b3); 
$('#b5SliderVal').text(b5); 
$('#b7SliderVal').text(b7); 

bearbeiten

Nachdem ich komal Methode verwenden, ich stil Ich habe andere Probleme wie this Abbildung zeigt. Ich weiß nicht, warum dies nicht in der aktualisierten jsfiddle reproduziert werden kann, aber es ist wirklich ein Problem. Außerdem möchte ich auch die Positionen der Texte in der Klasse sliderVal fixieren, d. H. Sie erscheinen in der gleichen Zeile, in der die Schieberegler erscheinen, anstatt in einer anderen Zeile, wenn das Fenster schrumpft, wie this.

Answer 1

Entfernen Sie einfach class slider von divs und entfernen Sie auch zweite div class= row. hier ist die Lösung http://jsfiddle.net/et7pvqpj/37/