html - Bootstrap 内联表单元素

Question

我正在尝试将验证码图像和文本框内联。我尝试了分组解决方案、内联解决方案和许多其他解决方案。但是，它对我没有帮助。

如有任何帮助，我们将不胜感激。

<form action="/Default/Perform" class="form-horizontal" method="post">
<div class="form-group">
     <label class="control-label col-sm-4" for="txtPassword">Password</label>
     <div class="col-sm-6">
         <input type="password" class="form-control" id="txtPassword" maxlength="10" size="10" placeholder="Enter a password">
     </div>
     <div class="col-sm-2">&nbsp;</div>
</div>
<div class="form-group">                        
     <label class="control-label col-sm-4" for="CaptchaText">Enter the number:</label>
     <div class="col-sm-6">
         <img src="/Default/ShowCaptchaImage">&nbsp;<input class="form-control" id="CaptchaText" name="CaptchaText" type="text">
     </div>
</div> 
</form>

Answer 1

添加一个类并提供如下 css:

<div class="col-sm-6 test">
   <img src="/Default/ShowCaptchaImage">&nbsp;
   <input class="form-control" id="CaptchaText" name="CaptchaText" type="text">
</div>

CSS:

.test{
  display:flex;
}

Fiddle