Css内联 - 使用按钮响应的输入字段右侧的文本

Question

您好我正在尝试用输入字段右侧的文本制作带有文本的Css内联div，所有这些都必须是响应式的。

我附上了布局图片。

这是我到目前为止所做的。

<form class="form-inline" action="/register-form/" method="post">
<div style="white-space:nowrap">
<label for="id1">Send 10 Free SMS</label>
<input type="text" id="id1"/>
<input class="btn btn-green" style="background: #00c17a none repeat scroll 
0px 0px; color: #ffffff; border: 0px none; border-radius: 3px; cursor: 
pointer; margin-left: 4px; padding: 14px 40px; font-size: 20px ! important;
font-family: Roboto Condensed; font-weight: bold;" type="submit" value="FREE
TRIAL" />
</div>
</form>   

更新 - 问题已在下面回答 - 解决方案是使用bootstrap .col-md-4列。谢谢你的帮助。

Answer 1

如果您使用的是bootstrap，则HTML需要符合其结构。此示例定义一行，其中包含三个大小相等的列。这告诉bootstrap在不同大小的浏览器中呈现内容时的行为方式。

＆＃13;

＆＃13;

.advert {
  background: red;
  padding: 10px;
}
.col-sm-4 {
  text-align: center;
}
#id1 {
  margin-top: 15px;
}
label {
  margin-top: 10px;
  text-align: center;
}
span {
  display: block;
  font-size: 10px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5jsbootstrap.min.js"></script>

<form class="form-inline" action="/register-form/" method="post">
  <div class="container advert">
    <div class="row">
      <div class="col-sm-4">
        <input type="text" id="id1" />
      </div>
      <div class="col-sm-4">
        <label for="id1">Send 10 Free SMS<span>No Credit Card Required</span>
        </label>
      </div>
      <div class="col-sm-4">
        <input class="btn btn-green" style="background: #00c17a none repeat scroll 0px 0px; color: #ffffff; border: 0px none; border-radius: 3px; cursor: pointer; padding: 14px 40px; font-size: 20px ! important;        font-family: Roboto Condensed; font-weight: bold;" type="submit" value="FREE TRIAL" />
      </div>
    </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;