Question

我正在尝试将一个输入字段放在nabvar的中间，以用作实时过滤器输入。在该输入的右侧应该是一个span，它将显示匹配的数量（它的值是使用jQuery更改的）。我开始使用text-align：center CSS属性，但是，因为span最初是隐藏的，所以当它显示它将输入移动到左边时（使组输入+ span居中，这很有意义，给定CSS规则）。

另外，我似乎无法使用CSS更改输入宽度（我可以使用HTML标记上的size属性来实现）。

这是HTML：

<nav class="navbar navbar-default navbar-fixed-top navbar-erat">
    <div class = "navbar-header">
     <button type="button" class="navbar-toggle well-bg" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
        <span class="fa fa-bars fa-lg fa-fw"></span>
      </button>
    </div>
    <?php if (isset($livefilter)): ?>
        <div class = "navbar-form navbar-form-center">
            <input type = "text" id = "filter" class = "form-control search-input" placeholder = "Filtro"> 
        <span id = "filter-count"></span> 
        </div>
    <?php endif; ?>
</nav>

这是相应的CSS：

.navbar-erat {
    background: #EEEAF7 !important;
    width: 100%;
    white-space: nowrap;
    border-bottom: 1px solid #D6C9F5 !important;
}

.navbar-form-center {
    text-align: center;
    margin-top: 12px;
    position: fixed;
    width: 100%;
}

.search-input {
    -webkit-border-radius: 50px !important; //For Safari, etc.
    -moz-border-radius: 50px !important; //For Mozilla, etc.
    border-radius: 50px !important; //CSS3 Feature
}

以防万一，与它们一起运作的jQuery：

<script>
    $(document).ready(function() {
        $('#filter').hide().fadeIn(1000);
        $("#filter").keyup(function() {
            // Retrieve the input field text and reset the count to zero
            var filter = $(this).val(),
                count = 0;
            $(".info-filter").each(function() {

                // If the list item does not contain the text phrase fade it out
                if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                    $(this).fadeOut();

                    // Show the list item if the phrase matches and increase the count by 1
                } else {
                    $(this).show();
                    count++;
                }
            });

            // Update the count
            var numberItems = count;
            $("#filter-count").text(" " + count + " coincidencias encontradas");
        });
    });
</script>

所以，重述一下我有两个主要问题：

当跨度出现时停止输入移动（以某种方式将其固定到导航栏的中间）
从CSS设置输入宽度

提前致谢，

Answer 1

只需在此处添加<br/>

即可

  <input type="text" id="filter" class="form-control search-input" placeholder="Filtro">
  <br>
  <span id="filter-count"></span>`

请参阅小提琴：https://jsfiddle.net/16q2xr8k/17/

Answer 2

您的Bootstrap结构存在一些架构差异。

首先，Bootstrap文档提供了用作指导的代码片段，但并不意味着您必须使用所有内容。因此，.navbar-header类扩展到100％占用您的顶部标题并将输入字段下移到下一级别。如果您对将徽标放置在移动版本的顶部中心（类似应用程序的外观）不感兴趣，请移除此课程。请参阅this answer

其次，表单控件总是100％，这很好，所以你使用col-*类来指导父级大小，并以这种方式保持响应。

第三，navbar-form带有装订线填充物，如果不需要则移除。这几乎是我唯一需要做的CSS。

查看我的HTML（重新制作）

<nav class="navbar navbar-default navbar-fixed-top navbar-erat">
    <div class="">
        <button type="button" class="navbar-toggle well-bg" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
            <span class="fa fa-bars fa-lg fa-fw"></span>
        </button>
    </div>
    <?php if (isset($livefilter)): ?>
        <div class="navbar-form col-xs-6 col-xs-push-3 col-sm-4 col-sm-push-5">
            <input type="text" id="filter" class="form-control search-input" placeholder="Filtro">
            <span id="filter-count"></span>
        </div>
        <?php endif; ?>
</nav>

CSS adition

    .navbar-form{padding:0;}

请参阅demo

将输入定位在导航栏的中间

2 个答案: