如何使用 bootstrap 对齐面板上的滑块？

Question

我有一个control panel with 6 slider bars on it (implemented by bootstrap-slider), but those 6 slider bars seem to align differently with different window size: sometimes 4+2 and sometimes 2+2+2. I have no idea what a good-looking control panel is but I think mine is not elegant. I do not want them to drift "randomly", like 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);

编辑

我用komal的方法后，还有其他的问题this figure shows. I do not know why this cannot be reproduced in the updated jsfiddle, but it is really a problem. Besides, I also want to fix the positions of the texts in class sliderVal, i.e., they appear in the same line where the slider bars appear, rather than shown at another line when the window shrinks, like this。

Answer 1

只需从 div 中删除 class slider 并删除第二个 div class= row。这是解决方案 http://jsfiddle.net/et7pvqpj/37/

如何使用 bootstrap 对齐面板上的滑块？

How to align the slider bars on a panel using bootstrap?

css

twitter-bootstrap-3

bootstrap-slider

编辑