zurb 6範囲スライダの両側の位置のテキスト

Question

スライダの両端（左右）にテキストを表示しようとしています。これがなぜUXの観点から理にかなっているかは非常に明確です。明らかにそれは私のために働いていない：

<div class="row"> 
     <div class="small-10 small-centered columns"> 
      <fieldset class="fieldset "> 
       <legend style="background:0;">bla bla</legend> 
       <div style="color:#1583cc">left extreme name</div> 
        <div class="slider" data-slider data-initial-start="50" data-initial-end="100"> 
        <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span> 
        <span class="slider-fill" data-slider-fill></span> 
        </div> 
        <div style="color:#1583cc">right extreme name</div>   
      <div class="row"> 
        <div class="small-1 small-centered columns"> 
        <input type="number" id="sliderOutput2" style="text-align:center; color: #1583cc;"> 
        </div> 
        </div> 
      </fieldset> 
     </div> 
    </div> 

スライダがそれらの間にある第三列などの容器の幅全体を占めながら、テキストが自分の行になります。

私は、スライダがテキストがコンテナの幅の（左右の）端に置かれた後に残っているスペースを占める1つの行にしたいと思います。それはどのようにしてうまくいくのでしょうか？

Answer 1

Zurb Foundationの新機能として、あなたが求めるものだけを行うことができるグリッドシステムを調べる必要があります。レスポンシブデザインの基礎でもあります。

あなたのコード：

<div style="color:#1583cc">left extreme name</div> 
<div class="slider" data-slider data-initial-start="50" data-initial-end="100"> 
    <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span> 
    <span class="slider-fill" data-slider-fill></span> 
</div> 
<div style="color:#1583cc">right extreme name</div> 

...グリッドを活用すべきです。ここに例がありますが、あなたがそれについて行くことができる多くの方法があります。ここで

<div class="row"> 
    <div class="small-3 columns" style="color:#1583cc">left extreme name</div> 
    <div class="small-6 columns"> 
     <div class="slider" data-slider data-initial-start="50" data-initial-end="100"> 
      <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span> 
      <span class="slider-fill" data-slider-fill></span> 
     </div> 
    </div> 
    <div class="small-3 columns" style="color:#1583cc">right extreme name</div> 
</div> 

http://foundation.zurb.com/sites/docs/slider.html#data-binding

勉強すべきグリッド（と、より基礎）の情報です：

http://foundation.zurb.com/sites/docs/grid.html#basics