Question

我正在尝试创建一个导航栏。这里有2个问题。

搜索文字栏的宽度不是100％它应该将宽度填充到其列的100％。
Glyphicons不是垂直对齐的。

任何帮助将不胜感激。谢谢。

＆＃13;

html {
  background-color: #F4F5F9
}

body {
  padding-top: 50px;
}

.navbar.navbar-default {
  background-color: #3b5998;
  color: #fff;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: transparent;
  box-shadow: none;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="col-xs-8 col-md-8 col-lg-8">
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <div class="input-group input-group-md">
            <span class="input-group-addon transparent"><span class="glyphicon glyphicon-search" style="margin-top: 0px;"></span></span>
            <input class="form-control left-border-none" placeholder="Search things..." type="text" name="search_text">
          </div>
        </div>
      </form>
    </div>
    <div class="col-xs-4 col-md-4 col-lg-4">
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <a href="#"><span class="glyphicon glyphicon-home" style="font-size: 21px; margin-top: 0px;"></span></a>
          <a href="#"><span class="glyphicon glyphicon-envelope" style="font-size: 21px;margin-top: 0px;"></span></a>
          <a href="#"><span class="glyphicon glyphicon-user" style="font-size: 21px;margin-top: 0px;"></span></a>
        </div>
      </form>
    </div>
  </div>
</nav>

＆＃13;

Answer 1

1。

$('#tablePost').append(contactdiv);

我问你为什么在这里首先使用$("#productoPresupuesto"+ rowCount).kendoDropDownList({，因为你似乎希望他们的默认行为被覆盖。
此外，您应始终使用.navbar-default .container { display: flex; } .navbar-default .container [class^="col-"]:first-child, .navbar-default .container [class^="col-"]:last-child { width: auto; white-space: nowrap; }作为col-*-* s的直接子项。

2。

col-*-*

工作示例：

＆＃13;

.row

＆＃13;

.navbar-left .glyphicon {
  line-height: 34px;
}

＆＃13;

部署前始终autoprefix html { background-color: #F4F5F9 } body { padding-top: 50px; } .navbar.navbar-default { background-color: #3b5998; color: #fff; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; box-shadow: none; } .navbar-default .container { display: flex; } .navbar-default .container [class^="col-"]:first-child, .navbar-default .container [class^="col-"]:last-child { width: auto; white-space: nowrap; } .navbar-left .glyphicon { line-height: 34px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="col-xs-8 col-md-8 col-lg-8"> <form class="navbar-form navbar-right"> <div class="form-group"> <div class="input-group input-group-md"> <span class="input-group-addon transparent"><span class="glyphicon glyphicon-search" style="margin-top: 0px;"></span></span> <input class="form-control left-border-none" placeholder="Search things..." type="text" name="search_text"> </div> </div> </form> </div> <div class="col-xs-4 col-md-4 col-lg-4"> <form class="navbar-form navbar-left"> <div class="form-group"> <a href="#"><span class="glyphicon glyphicon-home" style="font-size: 21px; margin-top: 0px;"></span></a> <a href="#"><span class="glyphicon glyphicon-envelope" style="font-size: 21px;margin-top: 0px;"></span></a> <a href="#"><span class="glyphicon glyphicon-user" style="font-size: 21px;margin-top: 0px;"></span></a> </div> </form> </div> </div> </nav>。为了获得最大的浏览器兼容性，请在设置中使用CSS（底部的小方框）。

旁注：始终在> 0%之前加载jquery(.min).js。

元素未正确对齐

1 个答案: