Question

我正在尝试使用引导程序创建一个响应式网页，但问题是引导程序的网格系统在class="col-x"中没有正常工作我已经给出了2个元素。 col-md-xx，col-lg-xx和col-sm-xx正常运作。
这就是现在的样子：

这就是我想要的：

**摘要：我希望那些蓝色和绿色按钮出现在图像前面。图像在左侧，按钮应在右侧。 **

我的来源：

* {
    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>

Answer 1

尝试将col-6和col-2类更改为col-xs-6。您还可以阅读更多bootstrap网格的工作原理。还有我们的按钮，避免使用固定宽度。只需删除它。

更新：如果您希望它占用，请在您的按钮中添加btn-block 整栏。另外，请将搜索栏分隔到另一行。

* {
    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;
}

.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-xs-6">
                <img src="https://image.ibb.co/mp0505/logo.png"/>
            </div>
            <div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-xs-6 text-right">
                <div class="btn-group-justified btn-group-success">
                    <div class="dropdown buybtn">
                        <button class="btn btn-success btn-block  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 btn-block 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>

Answer 2

将您的图像和按钮组放在div上并使用flexbox。将图像设置为float：left并将按钮组设置为float：right。它应该工作;）

Answer 3

使用这个 <div class="logoDiv col-sm-3 col-xs-6"></div> <div class="TopBtns col-sm-3 col-xs-2"></div>

而不是

<div class="logoDiv col-lg-3 col-md-3 col-sm-3 col-6"></div> <div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-2"></div>

低于768px的设备上的Bootstrap网格系统问题

3 个答案: