如何增加标题中搜索栏的宽度

时间:2016-06-04 13:35:22

标签: html css twitter-bootstrap

我必须增加搜索栏的宽度,并使边框不可见,同时保持其移动响应。类似的东西:

http://oneclass.com/#!/notes

HTML

<a class="navbar-brand page-scroll" href="#page-top">dss</a>
</div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control ipt" placeholder="Search" name="q">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                    </div>
                </form>
            </li>
            <li>
                 <a  href="study_material.php">Study Material</a>
            </li>
            <li>
                 <a  href="about.php">About us</a>
            </li>
            <li>
                 <a  href="">Blog</a>
            </li>
        </ul>
    </div>
</div>

2 个答案:

答案 0 :(得分:0)

你可以用CSS做到这一点...... 只需将一些样式添加到要编辑的类元素中......

我想你可以使用这样的东西:

.ipt {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0px;
  border-bottom: 1px solid #ccc;
  height: 50px;
  font-size: 25px;
  line-height: 45px;
}

DEMO

答案 1 :(得分:0)

你可以在输入“text”标签上添加一些CSS。(这里有一个ipt类)。

.ipt {
   border:none;   //make the border invisible
   width:75%;     //set width to % instead of pixel to make it responsible.
   height:50px;
   font-size:22px; //control the text area's height of the text-input tag.
}

你可以在这里查看一个简单的演示。 http://codepen.io/fukurouzhong/pen/JKdLVd