data-toggle和data-target在bootstrap中不起作用 [英] data-toggle and data-target not working in bootstrap

问题描述

我正在使用bootstrap来开发导航栏，在该导航栏上有两个按钮用于登录，另一个用于注册。我希望当用户点击登录时，模式弹出窗口会弹出，当点击注册时，用户将被重定向到另一个页面。下面是我的代码，但在我看来，它不起作用。我尝试使用锚标记并将类设置为 btn btn-primary 但是按钮变得非常大并且 btn-sm class对大小没有影响。

I am using bootstrap to develop a navbar and on that navbar there are two buttons one for login and other for sign up. I want that when user clicks login a modal pop up fires up and when signup is clicked the user to be redirected to another page. Below is my code but it seems to me that it is not working. I tried to use anchor tag and setting class to btn btn-primary but then the button becomes very large and btn-sm class has no effect on size.

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-btn"><button id="loginbutton" type="button" class="btn btn-primary"  data-target=".modal"><i class="glyphicon glyphicon-log-in"></i>Login</button></li>
        <li class=" navbar-btn"><button type="button" class="btn btn-success"><i class="glyphicon glyphicon-link"></i><a href="./register.jsp">Create account</a></button></li>
    </ul>
</div>
<!-- Modal -->
<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Login</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" role="form" action="login" method="post">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input name="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10 pull-right">
                    <button type="submit" class="btn btn-default">Sign in</button>
                </div>
            </div>
        </form> 
    </div>
</div>

推荐答案

我修复了你的代码： JSFiddle

您刚刚忘记了某些部分，例如数据 - toggle =modal或我添加的两个div < div class =modal-dialog>< div class =modal-content>< / div>< / div> 。

You just forgot some parts like data-toggle="modal" or the two divs i added <div class="modal-dialog"><div class="modal-content"></div></div>.

顺便说一句，如果你想在导航栏中有一个按钮，那就有一个类：

By the way, if you want a button in a navbar there is a class for that:

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

这篇关于data-toggle和data-target在bootstrap中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！