ブートストラップを使ってパネル上のスライダーバーを揃える方法は？

Question

私はcontrol panelに6つのスライダーバー（bootstrap-sliderによって実装されています）を持っていますが、6つのスライダーバーは異なったウィンドウサイズ（時には4 + 2、場合によっては2 + 2 + 2）私はよく見えるコントロールパネルが何であるか分かりませんが、私は私がエレガントではないと思います。私は彼らがthisのように "ランダムに"ドリフトするのをやめたいのですが、どうすればいいですか？

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); 

編集

、私はSTIL他にもthisのような問題があります。私はなぜこれが更新されたjsfiddleで再現できないのかわかりませんが、それは本当に問題です。また、クラスsliderValのテキストの位置を修正したい、つまり、ウィンドウが縮小したときに別の行に表示されるのではなく、スライダーバーが表示される同じ行に表示されます（thisなど）。

Answer 1

divsからclass sliderを削除し、もう一度div class= rowを削除してください。ここには解決策があります。http://jsfiddle.net/et7pvqpj/37/