当页面最小化时，引导div不会排队 [英] Bootstrap divs don't line up when page is minimized

问题描述

这是我所拥有的： http://codepen.io/auble220/pen/rOPBKP。我在此处添加了媒体查询： http://codepen.io/auble220/pen/avyZZE ，不是太坏，但我知道有一个更好的方法。我试着使用Bootstrap的clearfix类，但这不改变任何东西。这是该部分的代码：

This is what I have: http://codepen.io/auble220/pen/rOPBKP. I added media queries here: http://codepen.io/auble220/pen/avyZZE, which isn't too bad, but I know there has to be a better way. I tried using Bootstrap's clearfix class, but that doesn't change anything. This is the code for that section:

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;
}

推荐答案

我会（个人地）避免将类/ ID与结构元素（如容器/行）混合使用/列除了纯样式（即颜色，文本等），因为这可以影响网格设计如何操作。

I would (personally) avoid mixing classes/IDs with structural elements like containers/rows/columns other then pure styling (ie color, text etc) as this can effect how the grid is designed to operate. You can however place your content inside these columns with much better results (generally speaking).

有一个固定的宽度因为这是没有必要的，所以我删除它，以及将所有内容放在行/列，而不是组合它们：

Have a fixed width for this isn't necessary, so I removed that as well as place everything inside of rows/columns instead of combining them:

#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>

这篇关于当页面最小化时，引导div不会排队的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！