如何使用引導對齊面板上的滑動條？

Question

我有一個control panel上面有6個滑動條（由引導滑塊實現），但這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 l還有其他問題，如this圖所示。我不知道爲什麼這不能在更新的jsfiddle中複製，但它確實是一個問題。此外，我還想修正sliderVal中文本的位置，即它們出現在滑動條出現的同一行，而不是在窗口縮小時顯示在另一行，如this。

Answer 1

只刪除class slider從divs，也刪除第二div class= row。這裏是解決方案http://jsfiddle.net/et7pvqpj/37/