html - 增加 Bootstrap 中搜索栏的宽度

Question

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

    <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>

Answer 1

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

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

.search-form label {
    display: inline;
}