Question

我正在尝试使用bootstrap在导航栏上创建一个搜索菜单，当它在较大的屏幕中使用时工作正常但不能在较小的sreeen尺寸下工作，这是菜单示例，如果你们可以的话，我也想做一个更好的时尚菜单请帮助帮我制作更好的时尚菜单。

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- form here -->
<form class="navbar-form" role="search">
    <div class="form-group">
	
	      <input type="text" class="form-control search-form" placeholder="search">
         <button  type="submit" class="btn btn-primary search-btn"><span class="glyphicon glyphicon-search"></span></button> </div>
</form>

</body>
</html>

我希望在搜索菜单中看到example，但我希望圆角

Answer 1

试试这段代码：

<form class="navbar-form" role="search">
        <div class="input-group add-on">
          <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
          </div>
        </div>
      </form>

Answer 2

您可以使用此结构并将按钮链接到输入

基本上你需要用div input-group-btn 包装div中的输入和按钮，这使得它们在小屏幕中对齐并粘在一起

class AdHelper {
   static let shared = AdHelper()

    func initAdMobBannerView(inViewController viewController: UIViewController) -> GADBannerView {
        var adMobBannerView = GADBannerView() 
        if UIDevice.current.userInterfaceIdiom == .phone {
            // iPhone
            adMobBannerView.adSize =  GADAdSizeFromCGSize(CGSize(width: 320, height: 50))
            adMobBannerView.frame = CGRect(x: 0, y: viewController.view.frame.size.height, width: 320, height: 50)
        } else  {
            // iPad
            adMobBannerView.adSize =  GADAdSizeFromCGSize(CGSize(width: 468, height: 60))
            adMobBannerView.frame = CGRect(x: 0, y: viewController.view.frame.size.height, width: 468, height: 60)
        }
        adMobBannerView.adUnitID = ADMOB_BANNER_UNIT_ID
        adMobBannerView.rootViewController = viewController

        return adMobBannerView
    }
}

func playAd() {
    let adMobBannerView = AdHelper.shared.initAdMobBannerView(inViewController: self)
    view.addSubview(adMobBannerView)
    let request = GADRequest()
    adMobBannerView.load(request)
}

以下是在导航栏菜单中使用它的方法：

#custom-search-input {
  margin: 0;
  margin-top: 10px;
  padding: 0;
}

#custom-search-input .search-query {
  padding-right: 3px;
  padding-right: 4px \9;
  padding-left: 3px;
  padding-left: 4px \9;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

#custom-search-input button {
  border: 0;
  background: none;
  /** belows styles are working good */
  padding: 2px 5px;
  margin-top: 2px;
  position: relative;
  left: -28px;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #D9230F;
}

.search-query:focus+button {
  z-index: 3;
}

菜单上的Bootstrap搜索输入会在较小的屏幕尺寸上破坏样式

2 个答案: