对齐按钮旁边的输入字段 - Twitter的引导CSS

你可以在我的演示，该按钮不:-(对齐按钮旁边的输入字段 - Twitter的引导CSS

正确对齐看是否有可能：

1）具有之间的空间输入栏和按钮&

2）按钮的垂直对齐是否正确？

代码：

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="col-sm-6"> 
 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-body form-horizontal payment-form"> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="concept" class="col-sm-4 control-label">Postcode</label> 
 
\t \t \t \t \t <div class="col-sm-8"> 
 
\t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t <input type="text" class="form-control" id="concept" name="concept"> 
 
\t \t \t \t \t \t \t <div class="input-group-btn"> 
 
\t \t \t \t \t \t \t \t <button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue" align="top" type="submit" style="margin-bottom:10px">Find Address</button> 
 
\t \t \t \t \t \t \t \t <button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue" align="top" type="submit">Change</button> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div>

来源

2016-07-11 michaelmcgurk

https://jsfiddle.net/a3xnqy33/

<div class="col-sm-6"> 
    <div class="panel panel-default"> 
     <div class="panel-body form-horizontal payment-form"> 
      <div class="form-group"> 
       <label for="concept" class="col-sm-4 control-label">Postcode</label> 
       <div class="col-sm-8"> 
        <div class="input-group"> 
         <input type="text" class="form-control" id="concept" name="concept"> 
         <div class="input-group-btn inup-group-addon"> 
          <button class="btn btn-default">Find Address</button> 
          <button class="btn btn-default" name="Continue" id="Continue" align="top" type="submit">Change</button> 
         </div> 
        </div> 
       </div> 
      </div>

请参阅修改提琴

来源

2016-07-11 08:04:52

非常感谢您花时间帮忙。我只有轻微的抱怨是在桌面级输入字段的宽度很小。有没有什么办法解决这一问题？ :) – michaelmcgurk

宽度是基于按钮的宽度和容器的宽度？不知道你在说什么..我提到的小提琴的宽度很大 –

嘿你也可以检查以下内容。在你的代码中，你没有正确地关闭你的div。

<div class="col-sm-6"> 
    <div class="panel panel-default"> 
     <div class="panel-body form-horizontal payment-form"> 
      <div class="form-group"> 
       <label for="concept" class="col-sm-3 control-label">Postcode</label> 
       <div class="col-sm-5"> 
        <input type="text" class="form-control" id="concept" name="concept"> 
       </div> 
       <div class="col-sm-4"> 
        <div class="input-group-btn"> 
         <button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Find Address</button> 
         <button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Change</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2016-07-11 08:16:59

对齐按钮旁边的输入字段 - Twitter的引导CSS

回答

相关问题