html - 页面最小化时，bootstrap div不对齐

这就是我所拥有的：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;
}

最佳答案

这是您的一个示例，说明如何首先使它具有移动性，并可以为您调整需求提供基础。

我会（个人）避免将类/ ID与诸如容器/行/列之类的结构元素混合，而不是纯粹的样式（即颜色，文本等），因为这会影响网格的设计工作方式。但是，您可以将内容放在这些列中，以获得更好的结果（通常而言）。

不必使用固定的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>