Bootstrap内联表单元素

时间:2016-04-02 11:56:17

标签: html css twitter-bootstrap twitter-bootstrap-3

我正在尝试将CAPTCHA图像和文本框内嵌。我尝试过分组解决方案,内联解决方案等等。但是,它没有帮助我。

任何帮助都将不胜感激。

Screen shot for reference

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

2 个答案:

答案 0 :(得分:0)

更改如下

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

答案 1 :(得分:0)

添加一个类并给出css:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp" ng-controller="myCtrl">
    <body>
        <ul>
            <li ng-repeat="element in segments track by $index">
                <item list="list" set-item="setItem(selected)" selected="selected" index="$index" segments="segments"></item>
            </li>
        </ul>
        <button type="button" ng-click="addSegment()">Add segment</button>
        <script src="app.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

CSS:

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

<强> Fiddle