1
ブートストラップを使用してレスポンシブなウェブページを作成しようとしていますが、ブートストラップのグリッドシステムが正常に機能しないという問題がありました。 col-md-xx、col-lg-xx、col-sm-xxは問題なく機能しています。
これは、今どのように見えるかです： 
以下のデバイスでブートストラップグリッドシステムの問題が発生する768px
をそしてこれは、私はそれになりたいものです：
**概要： 私はそれらの青と緑のボタンが手前に来たいです画像の イメージは左側にあり、ボタンは右側にある必要があります。 **
私のソース：
* {
text-decoration: none !important;
}
.header {
padding: 16px 58px 21px 58px;
}
.logoDiv {
float: left;
}
.logoDiv img {
float: left;
}
.TopBtns {
float: right;
}
.buybtn {
margin-bottom: 5px;
margin-top: 10px;
width: 300px;
}
.usersbtn {
width: 300px;
}
.TopBtns {
float: right;
}
/* Start Search Bar */
.searchForm {
margin-top: 20px;
direction: ltr !important;
text-align: center;
}
.dropdown-menu {
direction: ltr !important;
}
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
/* End Search Bar */
.navbar {
background-color: #fdfdfd;
-moz-box-shadow: 0 2px 8px rgb(189, 189, 189);
-webkit-box-shadow: 0 2px 8px rgb(189, 189, 189);
box-shadow: 0 2px 8px rgb(189, 189, 189);
border-radius: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
@media screen and (max-width: 1172px){
#adv-search {
width: 400px;
}
}
@media screen and (max-width: 992px){
#adv-search {
width: 300px;
}
.header {
padding: 16px 32px 21px 32px;
}
}
@media screen and (max-width: 768px){
#adv-search {
width: 100%;
}
.searchForm {
width: 100%;
float: none;
}
.TopBtns {
float: none;
}
.header {
padding: 16px 16px 21px 16px;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="logoDiv col-lg-3 col-md-3 col-sm-3 col-6">
<img src="https://image.ibb.co/mp0505/logo.png"/>
</div>
<div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-2">
<div class="btn-group-justified btn-group-success">
<div class="dropdown buybtn">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-shopping-bag"></i>
سلام سلام
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li><a href="#">HTML</a></li>
</ul>
</div>
<div class="dropdown usersbtn">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-user"></i>
سلام سلام
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li><a href="#">HTML</a></li>
</ul>
</div>
</div>
</div>
<div class="searchForm col-lg-6 col-md-6 col-sm-6 col-12">
<div class="input-group" id="adv-search">
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"
aria-hidden="true"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text"/>
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text"/>
</div>
</form>
</div>
</div>
</div>
</div>
<input type="text" class="form-control" placeholder="Search for snippets"/>
</div>
</div>
</div>
</div>
</div>