Question

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

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

由于

Answer 1

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

＆＃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;

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

1 个答案: