Question

我开发了一个带有bootstrap的响应式页面。在我的页面中，我有一个表单，其中订阅文本和提交按钮是浮动的。我已经尝试了很多，但我没有删除此问题。我想要buttn和订阅文字，如下图所示 result which i want

但低于768px我得到了这个结果result which i am getting

HTML代码： -

    <div class="fromdiv">
<form>
<input class ="col-sm-7 col-md-7 col-lg-8 Frominput" type="Name" type="text" placeholder="First Name" required>
<input class ="col-sm-7 col-md-7 col-lg-8 Frominput2" type="Name" type="text" placeholder="Last Name" required>
<input class ="col-sm-7 col-md-7 col-lg-8 Frominput3" type="Email" type="Email" placeholder="Email Address" required> </br>
<div class="col-md-12 col-lg-12 subscribesubmit">
 <img class ="img-responsive Fromsubscribe" src="HomeImage\subscribe.png"/>
<p class ="col-md-6 col-lg-5 FromsubscribeSpan"> Safe Unsubscribe </p>
<button class=" col-xs-6 col-sm-6 col-md-4 col-lg-2 btn btn-primary Submit_Button"> Submit </button>
</div>
</form>
</div>

和css是： -

.Frominput,.Frominput2,.Frominput3
{       
    margin-left: 19.5%;
    height:43px;
    font-size: 15px;
    font-family: Lato-Light;
    float:left;
}

.Frominput2,.Frominput3
{
    margin-top:18px;
}


:placeholder-shown 
{
  font-size:18px;
  font-family:Lato-Regular;
  padding-left: 2%;
}
.Fromsubscribe
{
    margin-top: 186px;
    font-size: 15px;
    font-family: Lato-Light;
    clear:both;
}
.FromsubscribeSpan
{
    font-size: 15px;
    font-family: Lato-Light;
    margin-top:-4%;
    margin-left:0.5%;
    clear:both;

}

.Submit_Button
{
    width:100px;
    height:40px;
    background-color:#58A6CA;
    color: white;
    padding: 6px 0px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight:Bold;
    cursor: pointer;
    outline-style:none;
    border:none;
    text-align:center;
    font-family:Lato-Hairline;
    margin-left: 68.5%;
    margin-top: -6%;
    position:relative;
    display:inline-block;
    clear:both;
}

请帮我解决这个问题。在这里输入代码

Answer 1

试试这个，我重新制作你的代码结构，以便做出更好的响应式设计。您可以使用CSS个性化表单。

HTML：

 SELECT COUNT(*) into vote_count FROM user_votes WHERE user_id = NEW.user_id

CSS：

<div class="container form-container">
  <form>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="First Name" required>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Last Name" required>
    </div>
    <div class="form-group">
      <input type="email" class="form-control" placeholder="Email Address" required>
    </div>
    <div class="left-info">
      <img class="img-responsive Fromsubscribe" src="HomeImage\subscribe.png" />
      <p>Safe Unsubscribe </p>
    </div>
    <div class="right-info">
      <button type="submit" class="btn btn-primary Submit_Button">Submit</button>
    </div>
  </form>
</div>

DEMO：

https://jsfiddle.net/tff6Lhxz/

bootstrap表单按钮和订阅para浮动问题

1 个答案: