0

我有一个控制面板，上面有 6 个滑块（由 bootstrap-slider 实现），但是这 6 个滑块似乎与不同的窗口大小对齐方式不同：有时是 4+2，有时是 2+2+2。我不知道什么是好看的控制面板，但我认为我的并不优雅。我不希望他们像这样“随机”漂移，我该怎么办？

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 的方法后，我还有其他问题，如图所示。我不知道为什么这不能在更新的jsfiddle中重现，但这确实是一个问题。此外，我还想固定类中文本的位置sliderVal，即它们出现在滑块出现的同一行，而不是在窗口缩小时显示在另一行，像这样。

4

1 回答 1

1

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

于 2017-05-29T20:10:13.663 回答