我想在不创建换行符的情况下最大化“搜索”文本输入的宽度(即,“清除”链接将与“关于”链接紧密结合)。
我只有CSS和网页设计的基本经验。我阅读了有关“ overflow: hidden
”技巧的内容,但是当目标元素右边有更多元素时,我不明白如何使用它。
谢谢
编辑:
可以部分解决方案是针对每种情况“手动”设置宽度,例如在:
@media (max-width: 767px) {
#searchbar > .navbar-form {
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#searchbar > .navbar-form {
width: 205px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#searchbar > .navbar-form {
width: 425px;
}
}
@media (min-width: 1200px) {
#searchbar > .navbar-form {
width: 625px;
}
}
但是当菜单的文本为“动态”(例如,包含“ Hello用户名”)时,此解决方案将不起作用。
我想如果您假设菜单文本的宽度有限制,这不是一个大问题-手动计算/测试这些宽度只是很烦。我只是想知道是否有一种自动完成此操作的巧妙方法。
对于Bootstrap 3.2及更高版本,您还应该将设置display:table;
为input-group
,将宽度设置1%
为input- group-addon
。
<div style="display:table;" class="input-group">
<span style="width: 1%;" class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<input type="text" autofocus="autofocus" autocomplete="off" placeholder="Search Here" name="search" style="" class="form-control">
</div>
演示Bootstrap版本3.2+:
-
是否允许更改导航栏元素的位置?我不理解“不创建换行符(即,“清除”链接将与“关于”链接紧密相连)。。
我做了什么:
style="display:inline"
)相关问题:
html :
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Project</a>
</div>
<div class="navbar-collapse collapse" id="searchbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="about.html">About</a></li>
<li id="userPage">
<a href="#@userpage"><i class="icon-user"></i> My Page</a>
</li>
<li><a href="#logout" data-prevent="">Logout</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" title="Start a new search">Clear</a></li>
</ul>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
</div>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
问题内容: 我想在页面上建立一个导航栏效果,像一样(向下滚动栏变得更小并且徽标更改后)。我在页面上使用bootstrap 3。有没有一种简单的方法可以通过Bootstrap实现它? 问题答案: 粘性导航栏: 要制作粘性导航,您需要将 navbar-fixed-top 类添加到导航中 官方文档 :http : //getbootstrap.com/components/#navbar-fixed-
我用的是木星笔记本。我有一个相当宽的屏幕,但是显示的输出(例如,当我打印一个数组时)被格式化,就像屏幕很窄一样。 我找到了一种增加细胞宽度的方法 但这似乎只影响输入,而不影响输出(参见屏幕截图): 我已尝试在
我正试图获得一个可切换的边栏: 无边栏: 带侧边栏: (以下是一个行为示例:http://pythonhosted.org/cloud_sptheme--请参见侧栏上的按钮。使用其代码库并不容易,因为它不是基于引导的) 我从一个使用Bootstrap 2和jQuery 1.8的工作示例开始:jsfiddle,SO question,并试图使其在Bootstrap 3上工作。下面是一个代码(boot
我这里有一个基本的Bootstrap navbar 我想做的是: (Navbar) -----logo---------------------登录/注册----- (下拉菜单) ----子项----子项---------------------------------- 在悬停时,我想使下拉菜单显示全宽右下方的navbar。悬停事件不是我有问题的,我有问题定位它正确的100%宽度。 更新 我看到
导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的的包裹。它很容易扩展,而且,在折叠板插件的帮助下,它可以轻松与幕后内容整合。 基础 这些是你开始使用导航条之前需要知道的东西: 导航条要求一个包裹的.navbar以及一个配色方案类(可以是.navbar-default或者.navbar-inverse)。 当在一个导航条中使用多个组件时,必须用一些 对齐类 。 导航条以及它们的内容默
导航栏是一个固定区域 (在固定和穿透布局类型中) 。它位于屏幕顶部,包含页面标题和导航元素。 导航栏包含3个部分:左、中、右。每个部分都可以包含任意的HTML内容,但推荐按照如下方式使用: 左部 用来放置返回链接、图标以及单独的文字链接。 中部 用来显示页面标题和标签链接(即按钮控制)。 右部 和左部一样。 导航栏布局 导航栏布局相当简单,根据字面意思即可理解: <div class="navba