頁面最小化時自舉div不排隊

Question

這是我擁有的：http://codepen.io/auble220/pen/rOPBKP。我在這裏添加了媒體查詢：http://codepen.io/auble220/pen/avyZZE，這不算太壞，但我知道必須有更好的方法。我嘗試過使用Bootstrap的clearfix類，但是這並沒有改變任何東西。這是該節的代碼：

HTML：

<div id="brkSesDiv" class="row"> 
    <div id="breakDiv" class="col-md-6 text-right"> 
    <button class="plusMinus" id="plus1">+</button> 
    <h1 id="breakLen">05</h1> 
    <button id="minus1" class="plusMinus">-</button> 
    <h4>break length</h4> 
    </div> 
    <div id="sesDiv" class="col-md-6 text-left"> 
    <button id="plus2" class="plusMinus">+</button> 
    <h1 id="sesLen">25</h1> 
    <button id="minus2"class="plusMinus">-</button> 
    <h4>session length</h4> 
    </div> 
</div> 

CSS：

#brkSesDiv { 
    margin: 30px 0 0 0; 
    height: 100px; 
    width: 350px; 
    margin: auto; 
} 
#breakDiv { 
    display: inline; 
} 
#breakLen { 
    display: inline; 
} 
#sesDiv { 
    float: left; 
} 
#sesLen { 
    display: inline; 
} 

Answer 1

下面是一個例子，你能怎樣讓這個移動第一，可能會給你一個基地調整滿足您的需求。

我會（個人）避免將類/標識與像容器/行/列等結構元素混合在一起，而不是純粹的樣式（即顏色，文本等），因爲這會影響網格的設計運行方式。但是，您可以將您的內容放在這些列中，並獲得更好的結果（一般來說）。

對此有一個固定的width是沒有必要的，所以我刪除以及一切就緒行/列，而不是將它們結合起來的內部：

#brkSesDiv { 
    margin: 30px 0 0 0; 
    height: 100px; 
    width: 350px; 
    margin: auto; 
} 

見工作示例代碼段。

var sec = 0; 
 
var min; 
 
var breakLenCount = 5; 
 
var sesLenCount = 25; 
 
var breakTimer; 
 
var timerRunning = false; 
 

 
$(document).ready(function() { 
 
    $('#plus1').click(function() { 
 
    if (breakLenCount < 9) { 
 
     $('#breakLen').html('0' + (breakLenCount += 1)); 
 
    } else { 
 
     $('#breakLen').html(breakLenCount += 1); 
 
    } 
 
    }); 
 
    $('#minus1').click(function() { 
 
    if (breakLenCount < 9) { 
 
     $('#breakLen').html('0' + (breakLenCount -= 1)); 
 
    } else { 
 
     $('#breakLen').html(breakLenCount -= 1); 
 
    } 
 
    }); 
 
    $('#plus2').click(function() { 
 
    if (sesLenCount < 10) { 
 
     $('#sesLen').html('0' + (sesLenCount += 1)); 
 
     $('#min').html(sesLenCount); 
 
    } else { 
 
     $('#sesLen').html(sesLenCount += 1); 
 
     $('#min').html(sesLenCount); 
 
    } 
 
    }); 
 
    $('#minus2').click(function() { 
 
    if (sesLenCount < 11) { 
 
     $('#sesLen').html('0' + (sesLenCount -= 1)); 
 
     $('#min').html(sesLenCount); 
 
    } else { 
 
     $('#sesLen').html(sesLenCount -= 1); 
 
     $('#min').html(sesLenCount); 
 
    } 
 
    }); 
 

 
    min = sesLenCount; 
 
    sec = 0; 
 

 
    $('#timer').click(function() { 
 
    if (timerRunning) { 
 
     clearInterval(sesTimer); 
 
     timerRunning = false; 
 
     return; 
 
    } else { 
 
     sesTimer = setInterval(time, 1000); 
 
    } 
 
    }); 
 

 
    function time() { 
 
    timerRunning = true; 
 
    sec--; 
 
    if (sec < 00) { 
 
     sec = 59; 
 
     min--; 
 
    } 
 
    if (sec < 10) { 
 
     sec = '0' + sec; 
 
    } 
 
    if (min < 1 && sec < 1) { 
 
     timerRunning = false; 
 
     clearInterval(sesTimer); 
 
     min = breakLenCount; 
 
     $('#min').html(min); 
 
     $('#sec').html(00); 
 
     bTimer = setInterval(breakTimer, 1000); 
 
    } 
 
    $('#min').html(min); 
 
    $('#sec').html(sec); 
 
    } 
 

 
    function breakTimer() { 
 
    sec--; 
 
    if (sec < 00) { 
 
     sec = 59; 
 
     min--; 
 
    } 
 
    if (sec < 10) { 
 
     sec = '0' + sec; 
 
    } 
 
    if (min < 1 && sec < 1) { 
 
     clearInterval(bTimer); 
 
     min = sesLenCount; 
 
     $('#min').html(min); 
 
     $('#sec').html(00); 
 
     setInterval(time, 1000); 
 
    } 
 
    $('#sec').html(sec); 
 
    $('#min').html(min); 
 
    } 
 
});

body { 
 
    font-family: Arial, sans-serif; 
 
} 
 
h1#pTimer { 
 
    font-size: 5em; 
 
} 
 
h1.title { 
 
    font-size: 4em; 
 
    color: #444444; 
 
    text-shadow: 3px 3px 5px; 
 
} 
 
#brkSesDiv { 
 
    padding-top: 10px; 
 
} 
 
#breakDiv { 
 
    display: inline; 
 
} 
 
#breakLen { 
 
    display: inline; 
 
} 
 
#sesLen { 
 
    display: inline; 
 
} 
 
.plusMinus { 
 
    border-radius: 25%; 
 
    border: 1px solid transparent; 
 
    background-color: transparent; 
 
    color: #444; 
 
    font-size: 2.5em; 
 
    font-weight: bold; 
 
} 
 
#timer { 
 
    margin: 25px auto 0 auto; 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 3px solid #444; 
 
    border-radius: 50%; 
 
    box-shadow: 0px 0px 25px; 
 
    background-color: #fff; 
 
    cursor: pointer; 
 
    display: table; 
 
    vertical-align: middle; 
 
} 
 
#time { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
@media (max-width: 480px) { 
 
    h1#pTimer { 
 
    font-size: 2.5em; 
 
    } 
 
    h1.title { 
 
    font-size: 2em; 
 
    } 
 
    #timer { 
 
    margin: 10px auto 0 auto; 
 
    width: 175px; 
 
    height: 175px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="text-center"> 
 
    <h1 id="pTimer">Pomodoro Timer</h1> 
 

 
    </div> 
 
    <div class="row"> 
 
    <div id="brkSesDiv"> 
 
     <div class="col-xs-6 text-right"> 
 
     <div id="breakDiv"> 
 
      <button class="plusMinus" id="plus1">+</button> 
 
      <h1 class="title" id="breakLen">05</h1> 
 

 
      <button id="minus1" class="plusMinus">-</button> 
 
      <h4>break length</h4> 
 

 
     </div> 
 
     </div> 
 
     <div class="col-xs-6 text-left"> 
 
     <div id="sesDiv"> 
 
      <button id="plus2" class="plusMinus">+</button> 
 
      <h1 class="title" id="sesLen">25</h1> 
 

 
      <button id="minus2" class="plusMinus">-</button> 
 
      <h4>session length</h4> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="timer" class="text-center"> 
 
    <div id="time"> 
 
     <h1 class="title">Session</h1> 
 

 
     <h1 class="title"><span id="min">25</span>:<span id="sec">00</span></h1> 
 

 
    </div> 
 
    </div> 
 
</div>

認爲這樣做是