Question

我想要排成一行，我的所有元素都保持在同一行。这是我的代码，按钮进入SM尺寸的下一行（小于576像素）。我该怎么办呢？请看屏幕截图。 3 buttons goes next line

      <div class="row">
            <div class="col-xs-2 col-sm-3 col-md-2">
                <img src="img/1.png" alt="site-logo" class="site-logo">
            </div>
            <div class="col-xs-0 col-sm-0 col-md-7 d-none d-md-block">
                <label class="sr-only"></label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                            <i class="fas fa-search"></i>
                        </div>
                    </div>
                    <input type="text" class="form-control" placeholder="جستجو">
                </div>
            </div>
            <div class="col-xs-7 col-sm-5 col-md-3 header-btn ml-auto">
                <button class="btn btn-header d-md-none">
                    <i class="fas fa-search"></i>
                </button>
                <button class="btn">ورود</button>
                <button class="btn">ثبت نام</button>
            </div>
        </div>

Answer 1

您的代码存在一些问题，其中大部分都与您使用col-xs有关。第一个问题是，基于您的其余代码，您使用的是Bootstrap 4，它删除了-xs后缀。

即使您使用的是Bootstrap 3，也没有-0网格大小。最小的有效数字是1，所以通过使用0，你有效地强制Bootstrap忽略那些无效的列声明，直到它遇到一个有效的声明，在你的第二列的情况下{ {1}}。

首先，我们需要更正列声明。您可能遇到的另一个问题是col-md-7声明。在Bootstrap 3中，使用d-*-*是正确的方式使列再次可见...但在Bootstrap 4中，您需要使用d-block，因为列是Flexbox的一部分现在模特。如果您依赖d-*-flex，则可以更改列的行为（从Flex到Block级别元素）。

-block

此处唯一的其他更改是对列大小进行一些修改;如果您打算将内容扩展到<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <div class="row"> <div class="col-2 col-sm-4 col-md-2"> <img src="img/1.png" alt="site-logo" class="site-logo"> </div> <div class="col-md-7 d-none d-md-flex"> <label class="sr-only"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fas fa-search"></i> </div> </div> <input type="text" class="form-control" placeholder="جستجو"> </div> </div> <div class="col-10 col-sm-8 col-md-3 header-btn ml-auto"> <button class="btn btn-header d-md-none"><i class="fas fa-search"></i></button> <button class="btn">ورود</button> <button class="btn">ثبت نام</button> </div> </div>的整个宽度，那么您真的应该尝试将列添加到12。

Bootstrap SM Size的下一行有些元素

1 个答案: