Question

我想实现在桌面和平板电脑视图的表单内的5列水平视图中有1个输入字段，3个下拉框和一个提交按钮。在移动视图中，它应与每个字段的边距（桌面或平板电脑视图中的左侧或右侧）以及移动视图的顶部或底部堆叠。

我尝试了以下on my site

<div class="row">           
    <div class="col-sm-4"><input placeholder="' . JText::_('COM_BT_MEDIA_ENTER_YOUR_KEYWORD') . '" type="text" name="filter_search" id="filter_search" value="' . $app->input->getString('filter_search') . '" title="' . JText::_('Search') . '" /></div>
    <div class="col-sm-2">' . $filterType . '</div>
    <div class="col-sm-2">' . $filterOrdering . '</div>
    <div class="col-sm-2">' . $filterDirection . '</div>
    <div class="col-sm-2">
        <a class="btn" href="#" onclick="document.adminForm.submit();">' . JText::_('JSEARCH_FILTER_SUBMIT') . '</a>
    </div>
</div>

但字段或下拉列表显示堆栈......

有关于此的任何想法吗？

由于

Answer 1

要学习引导程序，请将this网站设为您最好的朋友。

要查看解决方案的演示，请查看here

您的html元素需要向左浮动以保持内联。继承人HTML解决方案：

<div class="row">           
<div class="col-sm-4 left">
    <input type="text" class="form-control" placeholder="Placeholder text">
</div>
<div class="dropdown col-sm-2 left">
   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
       Dropdown
       <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
     <li><a href="#">Action</a></li>
     <li><a href="#">Another action</a></li>
     <li><a href="#">Something else here</a></li>
     <li><a href="#">Separated link</a></li>
  </ul>
</div>
<div class="dropdown col-sm-2 left ">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li><a href="#">Separated link</a></li>
    </ul>
</div>
<div class="dropdown col-sm-2 left">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>
       <li><a href="#">Something else here</a></li>
       <li><a href="#">Separated link</a></li>
     </ul>
</div>
   <div class="col-sm-2 left ">
       <button class="btn btn-default">Button</button>
   </div>
</div>

这里是CSS

.left{
    float: left; 
}

Bootstrap3 - 5列桌面平板电脑和移动设备内的表格

1 个答案: