Question

我有以下表格

<!DOCTYPE html>
<html>
<head>
    
    <link rel="shortcut icon" href="src/favicon.ico">
    <link rel="stylesheet" href="https://jessepollak.github.io/card/build/css/demo.css">
	
   
</head>
<body>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    <div class="demo-wrapper">
                

        <div class="demo-container">
            
            <div class="card-wrapper"></div>

			

            <div class="form-container active">
                <form action="">
                    <p class="small">Start typing in here to take over and try it out</p>
                    <div class="row collapse">
                        <div class="small-6 columns">
                            <input placeholder="Card number" type="text" name="number">
                        </div>
                        <div class="small-6 columns">
                            <input placeholder="Full name" type="text" name="name">
                        </div>
                    </div>
                    <div class="row collapse">
                        <div class="small-3 columns">
                            <input placeholder="MM/YY" type="text" name="expiry">
                        </div>

                        <div class="small-3 columns">
                            <input placeholder="CVC" type="text" name="cvc">
                        </div>

                        <div class="small-6 columns">
                            <input type="submit" value="Submit" class="button postfix">
                        </div>
                    </div>
                </form>
            </div>
        </div>

       
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
    <script src="https://jessepollak.github.io/card/build/js/demo.js"></script>
    <script src="https://rawgit.com/jessepollak/card/master/dist/card.js"></script>
    <script>
        $('code').each(function(i, e) {hljs.highlightBlock(e)});
        var card = new Card({ form: '.active form', container: '.card-wrapper' })
    </script>
</body>
</html>

这是https://jessepollak.github.io/card/

的一个例子

但我想将此引导主题样式应用于上面的表单，这是我要应用的样式https://blackrockdigital.github.io/startbootstrap-agency/

问题是，当我这样做时，它只是打破卡片形式，有人可以帮助我吗？

Answer 1

添加引导程序，如下面的

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

将样式更改为bootstrap主题

1 个答案: