Question

我的公司网站有一个选择加入表单，但它不会内联。

我需要名字，电子邮件和订阅所有人都在一行。任何想法？

我不确定它是不是很适合使用bootstrap。

HTML

<div class="container-fluid">
        <div class="row">

            <div class="horizontal-mailchimp">

                <div id="mc_embed_signup">
                    <form action="//growthitude.us12.list-manage.com/subscribe/post?u=7325f579d436346d635d003a4&amp;id=75cff09018" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

                        <div id="mc_embed_signup_scroll">

                            <div class="mc-field-group">
                                <label for="mce-FNAME">First Name </label>
                                <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="name">
                            </div>

                            <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address </label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="email">
                            </div>

                            <div id="mce-responses" class="clear">
                                <div class="response" id="mce-error-response" style="display:none"></div>
                                <div class="response" id="mce-success-response" style="display:none"></div>
                            </div>


                            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7325f579d436346d635d003a4_75cff09018" tabindex="-1" value=""></div>

                            <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

CSS

.horizontal-mailchimp .mc-field-group,
.horizontal-mailchimp .clear {
     display: inline-block;
}

.horizontal-mailchimp label {
     display: none;
     height: 1px;
     text-indent: -9999px;
}

.horizontal-mailchimp {
     background: red;
     margin: 20px auto;
     padding: 20px;
     text-align: center;
}

@media only screen and (max-width: 768px) {

     .horizontal-mailchimp .mc-field-group,
     .horizontal-mailchimp .clear,
     .horizontal-mailchimp input {
          display: block;
          width: 100%;
     }

     .horizontal-mailchimp .mc-field-group {
          margin-bottom: 5px;
     }

}

提前致谢

Answer 1

在这里，你需要的是将类“c-field-group”提供给主父div提交按钮，并将该div移动到电子邮件主父div的正下方并添加此css代码：

#mc_embed_signup .mc-field-group { clear: none !important; width: auto !important; }

如下所示：

.horizontal-mailchimp .mc-field-group,
.horizontal-mailchimp .clear {
     display: inline-block;
}

.horizontal-mailchimp label {
     display: none;
     height: 1px;
     text-indent: -9999px;
}

.horizontal-mailchimp {
     background: red;
     margin: 20px auto;
     padding: 20px;
     text-align: center;
}

@media only screen and (max-width: 768px) {

     .horizontal-mailchimp .mc-field-group,
     .horizontal-mailchimp .clear,
     .horizontal-mailchimp input {
       display:inline-block;
     }

     .horizontal-mailchimp .mc-field-group {
          margin-bottom: 5px;
     }

}
#mc_embed_signup .mc-field-group {
    clear: none !important;
    width: auto !important;
}

<html>

<head>



    <!-- FONT AWESOME -->


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">



    <!-- GOOGLE FONTS -->


    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">


    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <!-- Begin MailChimp Signup Form -->
    <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">


</head>


<body>


   
    <div class="container-fluid">
        <div class="row">

            <div class="horizontal-mailchimp">

                <div id="mc_embed_signup">
                    <form action="//growthitude.us12.list-manage.com/subscribe/post?u=7325f579d436346d635d003a4&amp;id=75cff09018" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

                        <div id="mc_embed_signup_scroll">

                            <div class="mc-field-group">
                                <label for="mce-FNAME">First Name </label>
                                <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="name">
                            </div>

                            <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address </label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="email">
                            </div>
													
													<div class="mc-field-group"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

                            <div id="mce-responses" class="clear">
                                <div class="response" id="mce-error-response" style="display:none"></div>
                                <div class="response" id="mce-success-response" style="display:none"></div>
                            </div>


                            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7325f579d436346d635d003a4_75cff09018" tabindex="-1" value=""></div>

                            
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>








</body>

</html>

Answer 2

https://plnkr.co/edit/e0ELyGgwvVMgCt4k86Zo?p=preview

它在大屏幕上正常工作，但当你的宽度低于768px时，它将mailchimp放入显示：块而不是显示：inline-block

@media only screen and (max-width: 768px) {

 .horizontal-mailchimp .mc-field-group,
 .horizontal-mailchimp .clear,
 .horizontal-mailchimp input {
   display:inline-block;
 }

 .horizontal-mailchimp .mc-field-group {
      margin-bottom: 5px;
 }

}

我所做的只是将显示更改为@media标签下的内联块。

如何使内嵌的自定义邮件黑猩猩形式

2 个答案: