Bootstrap 输入框 - 移动设备与平板电脑/台式机答案

【问题标题】：Bootstrap input box - mobile vs tablet/desktopBootstrap 输入框 - 移动设备与平板电脑/台式机
【发布时间】：2018-11-05 21:28:42
【问题描述】：

我正在使用 Bootstrap 为网站编写一个 wordpress 主题。导航栏上的搜索输入在桌面/平板电脑上看起来很好，如果窗口被调整为移动设备的大小。输入框和搜索按钮不再内联。请问有什么想法吗？

http://breakingborderline.co.uk/

导航栏

<nav class="navbar navbar-default navbar-color">
    <div class="container">
        <div class="navbar-header">
        <a class="navbar-brand title"  href="http://www.breakingborderline.co.uk">Breaking Borderline</a>
        </div> 
        <div class="navbar navbar-right">
        <?php get_search_form(); ?>
        </div>      
    </div>
</nav>

搜索表单

<div class="form-group">
<form role="search" method="get" class="form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="search" class="form-control form-control-sm" placeholder="Search for..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:">
    <input type="submit" class="btn btn-default" value="Search">
</form>
</div>

谢谢

【问题讨论】：

你试过输入栏的媒体查询吗？

标签： css twitter-bootstrap forms

【解决方案1】：

.form-control 是小型设备的块级元素。

您可以使用以下方法将它们内联：

.form-inline .form-control {
  display: inline-block;
  /* Add vertical-align to align them */
  vertical-align: bottom;
}

<form role="search" method="get" class="form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="search" class="form-control form-control-sm" placeholder="Search for..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:">
    <input type="submit" class="btn btn-default" value="Search">
</form>

【讨论】：

谢谢。