Question

我是使用bootstrap的新手，我想知道如何扩展搜索栏的长度。

我正在尝试创建Google主页的简化版本，但引导搜索框比Google小得多。

有谁知道如何增加搜索框的宽度？

另外，我如何在Google徽标周围添加填充？

我已经尝试在CSS中添加padding-top到.logo {}，但它似乎不起作用。

<!DOCTYPE html> 
<html lang = "en">
    <head> 
        <title>Simple Google Homepage</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/google_homepage.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="navbar-navbar-inverse-navbar-static-top" role="navigation">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" rel="home" href="/" title="Simple Google Homepage"></a>
            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse">

                <ul class="nav navbar-nav">
                    <li><a href="https://plus.google.com/up/accounts/upgrade/?continue=https://plus.google.com/u/0/?gpsrc%3Dogpy0%26tab%3DwX&gpsrc=ogpy0">+You</a></li>
                    <li><a href="https://mail.google.com/mail/?tab=wm">Gmail</a></li>
                    <li><a href="images.google.com">Images</a></li>
                    <li><a href="blank"> <span class="glyphicon glyphicon-th"></span></a></li>
                    <li><a href="mail.google.com">example@gmail.com</a></li>
                </ul>

                <div class="col-sm-3 col-md-3 pull-right">

                </div>

                </div>
        </div>


        <div class = "logo" align = "center">
            <img src = "https://www.google.com/images/srpr/logo11w.png" class = "Google" width= "269" height = "95">

                <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="" name="srch-term" id="srch-term">

                </div>
                </form>



        </div>

    </body


</html>

非常感谢您的反馈。

感谢。

Answer 1

在你的css中使用它：

#srch-term {
  width: 800px;
}

您可以将宽度更改为您想要的宽度。

Answer 2

将此CSS部分添加到头部并相应更改。

<style>
    .logo{
        padding-top: 150px;
    }
    .input-group{
        padding: 10px;
        width: 40%;
    }
</style>

但是如果你要添加另一个输入组，那么要小心，然后有一个Id。

如何使用填充和延长bootstrap搜索栏？

2 个答案: