html - Bootstrap : Align button adjacent to the textbox

标签 html css twitter-bootstrap

我正在尝试对齐右侧的按钮以适合与电子邮件文本框相邻的位置。

但是,它对我不起作用。

fiddler : https://jsfiddle.net/Vimalan/mt30tfpv/4/

<div class="col-xs-3">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control input-sm" id="RequestorNameTxtBox">
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control input-sm" id="RequestorEmailTxtBox">
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <label></label>
                            <button type="button" class="btn btn-primary btn-sm" id="RequestorLookupBtn">Lookup</button>
                        </div>
                    </div>

期望:

enter image description here

任何建议将不胜感激。

最佳答案

试试这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-xs-3">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control input-sm" id="RequestorNameTxtBox">
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control input-sm" id="RequestorEmailTxtBox">
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <button type="button" class="form-control input-sm btn btn-primary btn-sm" id="RequestorLookupBtn">Lookup</button>
                        </div>
                    </div>

关于html - Bootstrap : Align button adjacent to the textbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39301870/

相关文章:

javascript - jQuery:查找并计算包含变量的元素

jQuery UI CSS 类效果在 Chrome 中不起作用

html - 使用来自不同 div 的 anchor 标记或按钮更改幻灯片

javascript - 将 Bootstrap 单选按钮绑定(bind)到 Angular 属性

javascript - Bootstrap 模式显示和隐藏奇怪的行为

javascript - Cake PHP 表单助手。替换输入值

html - 基于宽度的不同 CSS

css - Content-Language 的响应头支持

jquery - 将焦点放在悬停 jquery 上的隐藏元素上

用于 twitter-bootstrap 的固定导航栏的 Javascript 在链接多个页面时不起作用?