在引导程序中增加搜索栏的宽度答案

【问题标题】：Increase width of search bar in bootstrap在引导程序中增加搜索栏的宽度
【发布时间】：2016-02-10 07:27:35
【问题描述】：

我在网站上使用引导程序。搜索栏在大屏幕上显示很好，但对于手机，搜索栏有一个空白区域。请建议我如何增加搜索栏的宽度。谢谢。

    <div class="col-md-3 col-xs-12 donate_search">
    <span class="col-xs-12 donate_span">
    <a href="#" target="_blank" > 
    <img class="donate" src="<?php echo get_template_directory_uri();  ?>/images/donate.png"> Donate Now
    </a>
    </span>

    <span class="col-xs-12">
    <form role="search" method="get" class="search-form input-group " action="<?php echo home_url( '/' ); ?>">
    <label><span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field form-control" placeholder="<?php echo esc_attr_x( 'Search', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
    </label>
    <span class="input-group-btn">
    <button class="btn btn-white search-submit" type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
    </span>
    </form>
    </span>
    </div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

请在您的特定媒体查询中写下 css ：

button.search-submit {
    margin-top: 0;
}

.search-form label {
    display: inline;
}

【讨论】：

感谢您的回复 Fahad Uddin。

【解决方案2】：

设置form > label{width: 100%;}，虽然不知道你为什么把输入放在标签里

【讨论】：