当我有时刷新页面时，切换按钮和搜索栏会错位，但随后再次刷新会修复它，不确定是什么原因导致此行为。
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> </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>最后一个问题，是否可以将切换和搜索栏合并为一个无缝元素？任何其他代码建议，我都洗耳恭听。这只是我正在尝试变得更好的一个元素。
最佳答案
好吧，这个 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> </button>
</div>
</div>也回答问题二，只需更改 border-radius 属性即可。
关于html - 切换按钮和搜索栏偶尔显示错位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36514200/