响应式Bootstrap按钮,带有输入组中的下拉列表

时间:2015-02-03 11:23:23

标签: javascript html css twitter-bootstrap

我无法在本网站的任何地方找到这个确切的问题,但是如果它已经存在则道歉。

我正在使用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是必需的吗?

由于

1 个答案:

答案 0 :(得分:2)

这可以通过将按钮文本包含在元素中并使用responsive utility classes隐藏/显示各种大小来实现。试试这个,它会将hiddex-xshidden-sm应用于普通文本,并将另一个spanhidden-mdhidden-lg添加到较小的文本范围。

&#13;
&#13;
<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;
&#13;
&#13;