问
保持按钮和表单,并在Bootstrap 3中的同一行中选择下拉列表
血色的蓮花 发布于 2023-02-13 12:25我正在努力保持按钮,以及带有标签(包括其标签)的表单都在Bootstrap 3的同一行.每当表单呈现时,它似乎在表单之前添加换行符.这是我到目前为止所放在一起的内容(http://www.bootply.com/98022):
我以为class="form-inline"会把它放在同一排.不幸的是,这是它呈现的方式:
这是我在图像编辑程序中创建的模型,我希望它看起来像:
我故意选择使用元素而不是Bootstrap下拉,因为移动设备上的界面是最佳的(列表将非常大,并且尝试使用表单元素在小屏幕上选择正确的选项更容易).
我发现了类似的问题,但大多数问题都没有解决表单中的标记,或者是旧版本的Bootstrap(2.x).任何帮助将不胜感激.
谢谢!
1 个回答
-
您的前两个按钮不在
form标签内.似乎
form-inline没有为标签定义样式,因此添加左浮动一些填充并将选择的宽度设置为auto.<div class="container"> <div class="row"> <form role="form" class="form-inline"> <button class="btn btn-default">Test 1</button> <button class="btn btn-default">Test 2</button> <div class="form-group"> <label for="selectUser" >Select:</label> <select id="selectUser" class="form-control selectWidth"> <option class="">One</option> <option class="">Two</option> <option class="">Three</option> </select> </div> <div class="btn-group"> <button class="btn btn-default">Test 3</button> </div> </form> </div> <!-- End Row --> </div> <!-- End Container -->2023-02-13 12:27 回答
mobiledu2502870067
撰写答案
今天，你开发时遇到什么问题呢？
立即提问
京公网安备 11010802041100号