小编Chr*_*ina的帖子

我刚刚开始学习bootstrap,我正在这个页面上使用他们的例子http://getbootstrap.com/examples/offcanvas/

如您所见,如果您转到该页面,则导航将向左对齐.我试图使用我在普通CSS中所做的事情,这是:

margin-right:auto 和 margin-left:auto

我也试过了

text-align:center

这些都没有用,我已经阅读了他们的导航文档,我不明白我在这里做的不同之处.

以下是该导航页面的代码.我试图将标签一次性放入所有4个导航容器中:

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header" >
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 1px;margin: auto;text-align: center;">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div>

我想创建一个如下所示的导航栏：

[品牌1] ... [链接1 | 链接2 | 链接3] ... [品牌2]

这就是我得到的，但是折叠菜单看起来很奇怪，并且缺少导航栏和折叠菜单之间的边框。http://www.bootply.com/fp8e8IYGuj

我对宽度 > 768px 时的外观和行为感到满意，但对折叠的外观和行为不满意。我希望它的行为像“正常”折叠菜单。例如这个： http: //www.bootply.com/GDf0pzFK9b

我在最新的Safari 8.0上使用Bootstrap工具提示(仅限)这个奇怪的情况.我有一个表格,我必须在每个输入上显示工具提示(请不要问为什么).

这是一个jsfiddle的例子

`http://jsfiddle.net/d61yuy8q/11/`

以下是它在Safari 8.0中的外观

首先我认为我们的CSS可能会导致一些问题,所以我把它剥离到纯引导类.然后我想也许我应该将那些工具提示从输入移动到包装输入的div,但这也没有帮助.

最后我删除了所有包装器,只留下了输入,但也没有帮助.

我的猜测是,如果两个相同的元素之间没有空格,则新的Safari无法识别mouseleave操作.

有没有人能想到任何解决方法呢？

我一直在使用jQuery的这个位(jQuery等高响应div行)来获得相同的高度并且它工作得非常好,但是如果使用相同的模式,它使用BS2和BS3,它不会扫描行以达到相同的高度,它扫描页面本身,然后同一页面上的所有模式(行> col- -)获得页面上最高的高度.这不是理想的实现.

http://jsbin.com/aVavuLeW/14/

上面的JSBin有一个使用BS3列(它的副本)的例子.您不能在堆叠点的列上具有相对位置,因此为了此Bin的目的已复制这些位置.如您所见,如果您在每一行上创建一个不同的类(在此示例中为.foo和.foo2),然后列表现出来,但如果您决定使用相同的模式,则页面上最高的高度将接管.

问题:如何解决使用相同模式的问题,它是根据页面而不是行计算的？

谢谢!!!

我有一个bootstrap导航器,我需要避免在较小的视口上堆叠它,以便它保持水平并且不会堆叠.

这是一个例子

HTML:

<div class="menuBar">
    <ul class="nav nav-justified">
        <li>
            <a href="#" class="menuItem">
                <i class="glyphicon glyphicon-asterisk"></i>
            </a>
        </li>
        <li>
            <a href="#" class="menuItem">
                <i class="glyphicon glyphicon-asterisk"></i>
            </a>
        </li>
        <li>
            <a href="#" class="menuItem">
                <i class="glyphicon glyphicon-asterisk"></i>
            </a>
        </li>
    </ul>
</div>

CSS:

.menuBar ul {
    text-align: justify;
}
.menuBar ul li a {
    display: inline-block;
}
.menuItem {
    font-size: 24px;
}

扩展版:http://jsfiddle.net/m5k93rwo/

最好的方法是什么？我怀疑有些玩数据切换,但不幸的是,我没有足够的经验来确定如何使它运作良好

如果您更新到 WooCommerce 3.0 并且您的主题尚未更新，如何使 WooCommerce 3.0 单一产品图片库像以前的版本一样工作？

对于不复制模板文件并使用条件、挂钩和过滤器进行修改以避免许多问题的主题来说，这是一个问题。

我正在尝试复制我的客户想要的桌面应用程序布局.我需要帮助div之间的空间和表的最小高度.我没有自定义引导程序的经验,所以如果我以错误的方式做到这一点,请分享它应该如何完成.我试图设置一个plunker但我不能让它工作？ plunker

 <body  ng-controller="MainCtrl">
  <div class="my-container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <ul class="nav navbar-nav pull-left">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Master <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li ng-controller="CustomerCtrl"><a ng-click="CustomerModal()">Customer</a></li>

                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav pull-left">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">New <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li ng-controller="JobCtrl"><a ng-click="clearSelectedJob();NewJobModal()">Job</a></li>

                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-2 column well">
            <div class="classWithPad">
                <div class="my-container well classWithPad">
                    <table class="table …

Bootstrap JS/CSS将透明空间附加到我主页NavBar内部的底部<td>.这显示了我使用默认引导程序配置的问题的实时预览NavBars.

这是一个完整的,(减去包含引导程序文件)和我编写的代码的最小示例NavBar.

<html>
<body>
<table align="center" border="1px"><tr>
<td>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Home</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div …

当用户点击拇指或主滑块前进时,您会认为.slick-active在拇指中指示主滑块中镜像的幻灯片,而是所有拇指都设置为.slick-active.我正在使用此脚本的1.4版.

演示:https://jsbin.com/mevaga/1/edit？ html,js,output

$(document).ready(function() {

    $('.portfolio-thumb-slider').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        asNavFor: '.portfolio-item-slider',
        dots: false,
        arrows: false,
        focusOnSelect: true
    });


    $('.portfolio-item-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: '.portfolio-thumb-slider'
    });


});

我尝试了什么:光滑的滑块 - 同步自动播放和主动导航 - 这不起作用.它曾经在这个脚本的旧版本中工作但仅在最初,一旦幻灯片前进它不起作用.

我正在为一个简单的登录表单使用引导模式：

<div class="modal fade login">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body row">        
                <div class="modal-header">
                    <h4>Login panel</h4>
                </div>
                <form class="capture" method="post" name="login">
                    <div class="form-group">
                        <input type="email" name="email" class="form-control" placeholder="Username">
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" class="form-control" placeholder="Password">
                    </div>
                    <button type="button" class="form-group btn btn-default btn-block">Login</button>
                </form>
                <div class="modal-footer"><center><button type="button" class="btn btn-default btn-block" data-dismiss="modal">Close</button></center></div>
            </div>
        </div>
    </div>
</div>

我还使用jQuery处理登录并返回一个回调，我希望使用boostrap将其显示为警报框。

这工作正常，但是警报消息受模式不透明度的影响并且很难看到。

如何使警报消息框出现而不受模态不透明度的影响？

我尝试了以下CSS：

.notification{
    position: fixed;
    top: 3em;
    left: 20%;
    right: 20%;
    z-index: 1000;
    opacity:0;
}

div如下

<div id="notification"></div>

由以下jquery控制，该jquery是从模式内部触发的：

function flash(type,message){
        $(".notification").remove();
        $("#notification").append($("<div …