我无法在本网站的任何地方找到这个确切的问题,但是如果它已经存在则道歉。
我正在使用Bootstrap设计一个站点,并在.jumbotron
内有一个跨越所有12列的搜索栏。这在右侧附有一个下拉按钮,用于指定用户想要执行的搜索类型。
标记看起来像这样:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12 jumbotron">
<div class=" col-md-12 col-sm-12 col-xs-12" id="faq_Search">
<h3>Ask a question</h3>
<div class="input-group">
<input type="text" id="faq_SearchBox" placeholder="Search..." class="search form-control"/>
<div class="input-group-btn input-group-lg input-group-md">
<button type="button" class="btn btn-danger dropdown-toggle btn-responsive" data-toggle="dropdown" aria-expanded="false">Select Search Type <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">Search Graduate</a></li>
<li><a href="#">Search Undergraduate</a></li>
</ul>
</div>
</div>
</div>
</div>
问题是,当您在s和xs视图中查看页面时,搜索按钮会占据搜索栏的大部分内容。我想让按钮响应,以便在这些视图中包含不同的文本以使其变小。这可能只是通过bootstrap框架。或者javascript是必需的吗?
由于
答案 0 :(得分:2)
这可以通过将按钮文本包含在元素中并使用responsive utility classes隐藏/显示各种大小来实现。试试这个,它会将hiddex-xs
和hidden-sm
应用于普通文本,并将另一个span
与hidden-md
和hidden-lg
添加到较小的文本范围。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12 jumbotron">
<div class=" col-md-12 col-sm-12 col-xs-12" id="faq_Search">
<h3>Ask a question</h3>
<div class="input-group">
<input type="text" id="faq_SearchBox" placeholder="Search..." class="search form-control" />
<div class="input-group-btn input-group-lg input-group-md">
<button type="button" class="btn btn-danger dropdown-toggle btn-responsive" data-toggle="dropdown" aria-expanded="false">
<span class="hidden-xs hidden-sm">Select Search Type <span class="caret"></span></span>
<span class="hidden-md hidden-lg">Smalltext</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">Search Graduate</a>
</li>
<li><a href="#">Search Undergraduate</a>
</li>
</ul>
</div>
</div>
</div>
</div>
&#13;