如何獲得此按鈕即可進入電子郵件字段旁邊

Question

我如何訂閱按鈕進入表單的電子郵件字段旁邊..和懸停似乎並沒有被工作的訂閱按鈕

使用引導和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> 

CSS

subscribe_form { 
border: 1px solid #DDDDDD; 
color: #CCCCC6; 
font-family: 'Roboto', sans-serif; 
font-size: 16px; 
margin-top: 0; 
outline: medium none; 
width: 75%; 
} 

.subscribe_form .btn-form { 
margin: 10px; 
} 

.btn-form { 
color: #00bfff; 
padding: 10px 30px; 
font-weight: 500; 
text-decoration: none; 
border-radius: 200px; 
transition: background-color 0.2s, border 0.2s, color 0.2s; 
border: 1px solid #00bfff; 
background-color: #fff; 
letter-spacing: .5px; 
font-size: 16px; 

} 

.btn-form:hover, 
.btn-form:active { 
border: 1px solid #00bfff; 
background-color: #fff; 
color: #00bfff;} 

繼承人發生了什麼事時，我想這下面（圖片附）

下面是代碼的該節

<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> 

Answer 1

您可以在<form>標籤添加form-inline類的其餘部分。 http://getbootstrap.com/css/#forms-inline。

<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> 

Answer 2

試試這個：

<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>