我必须增加搜索栏的宽度,并使边框不可见,同时保持其移动响应。类似的东西:
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>
答案 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;
}
答案 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