Css 如何使此按钮位于电子邮件字段旁边

如何使订阅按钮位于表单的电子邮件字段旁边。。悬停在订阅按钮上似乎不起作用

使用bootstrap、HTML5和CSS

<form class="subscribe_form">
<div class="subscrive_group wow fadeInUp">
<input class="form-control subscribe_mail" type="email" placeholder="Enter your email address">
<input class="btn-form" type="submit" value="Subscribe">
</div>
</form>

下面是我尝试此方法时发生的情况（附图）

下面是该部分的其余代码

<section class="works service-page">
<div class="container">
<h2 class="subtitle wow fadeInUp animated" data-wow-delay=".3s" data-wow-duration="500ms">TEXT     </h2>
<p class="subtitle-des wow fadeInUp animated" data-wow-delay=".5s" data-wow-duration="500ms">
                   TEXT
</p>
<div class="row">
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>
<a href="#" class="figma">
                                    text</a>  <span class="par-text-one"><a href="#">text</a></span>      

</h2>
<p class="para">
                              text
</p>
</figcaption>
<div class="img-wrapper">
<img src="images/" class="img-responsive" alt="this is a title" >
<div class="overlay">
<div class="buttons">       
<a target="_blank" href="">Discover</a>
</div>
</div>
</div>
<figcaption>
<p class="para">text
<br>
text
</p>
</figcaption>
</figure>
</div>

<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>
<a href="#" class="figma">
text </a>  <span class="par-text-one"><a href="#">text </a></span>      

</h2>
<p class="para">text
</p>
</figcaption>
<div class="img-wrapper">
<img src="images/.jpg" class="img-responsive" alt="this is a title" >
<div class="overlay">
<div class="buttons">       
<a target="_blank" href="">Discover</a>
</div>
</div>
</div>
<figcaption>
<p class="para">text
<br>text
</p>
</figcaption>
</figure>
</div>

<div class="col-sm-4 boxed">

<h2> More Products Coming Soon! </h2>
<p class="para-form">
text
</p>
<p class="para-blue">text
</p>
<div class="container">   
<form class="subscribe_form">
<div class="subscrive_group wow fadeInUp row col-sm-12">
<div class="col-sm-6">
<input class="form-control subscribe_mail" type="email" placeholder="Enter your email address">
</div>
<div class="col-sm-6">
<input class="btn-form" type="submit" value="Subscribe">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>

正文

正文


文本

文本


文本

文本

文本

正文

更多的产品即将推出！

文本

文本

您可以在

标记上添加

表单内联

类。 .

试试这个：

<form class="subscribe_form">
<div class="subscrive_group wow fadeInUp row col-sm-12">
    <div class="col-sm-6">
        <input class="form-control subscribe_mail" type="email" placeholder="Enter your email address">
    </div>
    <div class="col-sm-6">
        <input class="btn-form" type="submit" value="Subscribe">
    </div>
</div>
</form>

该按钮已经在字段旁边了…它不在实时视图中如果这样做，然后在将来添加更多表单元素，它会断开，而且，它只在大于768pxI的视口中工作。我刚刚为该部分添加了其余的代码，以防万一，除了“订阅”按钮之外，其他的帮助都有效了。我觉得我已经尽了一切努力把它放进去了，但是它没有成功。我不知道问题是什么。。。我的按钮悬停和活动似乎也不起作用：(

<form class="subscribe_form form-inline">
    <div class="subscrive_group wow fadeInUp">
        <input class="form-control subscribe_mail" type="email" placeholder="Enter your email address">
        <input class="btn-form" type="submit" value="Subscribe">
    </div>
</form>

<form class="subscribe_form">
<div class="subscrive_group wow fadeInUp row col-sm-12">
    <div class="col-sm-6">
        <input class="form-control subscribe_mail" type="email" placeholder="Enter your email address">
    </div>
    <div class="col-sm-6">
        <input class="btn-form" type="submit" value="Subscribe">
    </div>
</div>
</form>