css - 如何使用 Bootstrap 对齐面板上的 slider ？

Question

我有一个 control panel，上面有 6 个 slider (由 bootstrap-slider 实现)，但是这 6 个 slider 似乎与不同的窗口大小对齐不同:有时 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);

编辑

我用komal的方法后，还有其他问题，如图this。我不知道为什么这不能在更新的 jsfiddle 中重现，但这确实是一个问题。此外，我还想修复 sliderVal 类中文本的位置，即它们出现在 slider 出现的同一行，而不是在窗口缩小时显示在另一行，如 this .

Answer 1

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