切换按钮和搜索栏偶尔显示错位

Question

当我有时刷新页面时，切换按钮和搜索栏会错位，但再次刷新会修复它，不确定是什么原因导致此行为。

body {
  background-color: #2A333E;
  background-image: linear-gradient(to bottom, #2A333E, #918e82 100%);
  background-attachment: fixed;
}

div {
  display: block;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Additional styles for extra features -->
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">TEST</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <form class="navbar-form navbar-right" role="form" action="test.php" method="post">
          <div class="input-group"style="float:left;display:inline;">
            <input type="hidden" name="platform" value="2">
            <input type="checkbox" name="platform" value="1" checked data-size="normal" data-toggle="toggle" data-on="TEST1" data-off="TEST2" data-onstyle="success" data-offstyle="primary">
          </div>
          <div class="input-group">
            <input type="text" class="form-control" name="username" placeholder=" Name" maxlength="16" pattern="[A-Za-z][A-Za-z0-9_- ]{0,15}">
            <div class="input-group-btn">
              <button class="btn btn-default" type="submit" name="submit"><span class="glyphicon glyphicon-search"></span>&nbsp;</button>
            </div>
          </div>
        </form>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
    window.jQuery || document.write('<script src="bootstrap-3.3.6/docs/assets/js/vendor/jquery.min.js"><\/script>')

  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384
    -0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</body>

最后一个问题，是否可以将切换和搜索栏合并为一个无缝元素？任何其他代码建议，我都洗耳恭听。这只是我正在尝试变得更好的一个项目。

Answer 1

好吧，这个 JSfiddle 将我所有的评论都整合到了一个解决方案中：

https://jsfiddle.net/cLz10474/1/

body {
  background-color: #2A333E;
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://jsfiddle.net/cLz10474/1/bootstrap-3.3.6/docs/assets/js/vendor/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<div class="input-group" style="float:left;display:inline;">
  <input type="checkbox" name="platform" value="1" checked data-size="normal" data-toggle="toggle" data-on="TEST1" data-off="TEST2" data-onstyle="success" data-offstyle="primary"><!--
--></div><!--
--><div class="input-group"><!--
  --><input type="text" class="form-control" name="username" placeholder=" Name" maxlength="16" pattern="[A-Za-z][A-Za-z0-9_- ]{0,15}" style="border-radius: 0">
  <div class="input-group-btn">
    <button class="btn btn-default" type="submit" name="submit"><span class="glyphicon glyphicon-search"></span>&nbsp;</button>
  </div>
</div>

太回答问题二了，只需更改 border-radius 属性即可。

切换按钮和搜索栏偶尔显示错位

Toggle button and search bar occasionally show misaligned

html

css

react-bootstrap