引导搜索框和按钮对齐到标题文本的右侧(不在导航栏中)

詹姆斯·阿格纽

我正在使用Bootstrap 3.3.7,在小屏幕上查看时,很难将搜索框和按钮放到标题文本下方。

我想将其堆叠如下:

大屏幕(当前):

[Title] [search input] [submit button]

屏幕较小:

[Title]
[search input] [submit button]

小屏幕:

[Title]
[search input]
[submit button]

任何帮助,不胜感激。我已经有很长一段时间了,我的CSS技能太缺乏了,无法取得任何体面的进步。谢谢。

大萤幕:

在此处输入图片说明

屏幕较小(按钮被切断):

在此处输入图片说明

小屏幕:

在此处输入图片说明

这是我的代码:

<nav class="navbar navbar-inverse navbar-fixed-top">
     <div class="container">
         <!-- all the navigation stuff -->
    </div>
</nav>

<!-- main content -->
<div class="container" role="main">

    <div class="page-header">

        <form action="" method="GET" class="form-inline pull-right">

            <div class="form-group form-group-lg has-feedback">

                <label class="sr-only" for="search">Search</label>
                <input type="text" class="form-control" name="q" id="search" placeholder="Search">

                <span class="glyphicons glyphicons-xl glyphicons-group form-control-feedback"></span>

            </div>

            <button type="submit" class="btn btn-lg btn-success">
            <span class="glyphicons glyphicons-search" aria-hidden="true"></span>Search
            </button>

        </form>

        <h2>Quite Long Header Text</h2>

    </div>

<!--rest of page content -->

</div>

更新

谢谢@罗伯特·C。这就是您的建议的样子:

在此处输入图片说明

在此处输入图片说明

在此处输入图片说明

The button has reduced in size which is great, but the input field now spans the entire width. I think it would all work just fine if the small button and input field were in the same row. This would mean that even on small devices I'd only need two stacks.

Could you suggest how I might go about reducing the size of the input box so that it will allow the button to stick to its left side on the same 'row'?

Thanks a lot

Robert

You will need to add some wrappers to make sure everything is lined up (or, alternatively remove the padding on your <h2>) but something along the following should provide you a Bootstrap Grid solution:

<div class="container" role="main">
    <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-12">
            <h2>Quite Long Header Text</h2>
        </div>

        <div class="col-md-4 col-sm-4 col-xs-12">

            <form action="" method="GET" class="form-main">

            <div class="col-md-10 col-sm-10 col-xs-12">
                <label class="sr-only" for="search">Search</label>
                <div class="input-group">
                    <input type="text" class="form-control input-search" name="q" id="search" placeholder="Search">
                    <span class="input-group-addon group-icon"><span class="glyphicon glyphicon-user"></span>
                </div>
            </div>

            <div class="col-md-2 col-sm-2 col-xs-12">
                <button type="submit" class="btn btn-success">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="hidden-sm hidden-xs"> Search </span>
                </button>
            </div>

        </div>      

    </div>
</div>

You can see a Bootply fiddle here: http://www.bootply.com/bhvdBwcX4b

要在较小的屏幕上查看Bootply提琴,请确保单击移动图标,因为仅调整浏览器大小将导致渲染错误警告。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章