首页 > bootstrap 2个input下面放一个textarea对齐问题

bootstrap 2个input下面放一个textarea对齐问题

1.表单上部分input对齐用的栅格系统左右各50%。下面的textarea表单怎么能和上面的文字和表单对齐

<form action="#" class="form-horizontal">
        <div class="form-group col-sm-6">
            <label for="inoo" class="control-label col-xs-3 col-sm-3">姓氏</label>
            <div class="col-xs-9 col-sm-9">
                <input type="text" class="form-control" placeholder="Joe" id="index-name">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label for="inoo" class="control-label col-xs-3 col-sm-3">名称</label>
            <div class="col-xs-9 col-sm-9">
                <input type="text" class="form-control"></div>
        </div>
        <div class="form-group col-sm-6">
            <label for="inoo" class="control-label col-xs-3 col-sm-3">电话</label>
            <div class="col-xs-9 col-sm-9">
                <input type="text" class="form-control" placeholder="13888888888" id="index-phone">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label for="inoo" class="control-label col-xs-3 col-sm-3">邮箱</label>
            <div class="col-xs-9 col-sm-9">
                <input type="email" class="form-control" placeholder="some@gmail.com" id="index-email">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group col-sm-12" id="index-textarea">
            <label for="dsa" class="control-label col-xs-3 ">留言</label>
            <div class="col-sm-9 col-xs-9 col-lg-9">
                <textarea id="index-textarea-mes" class="form-control" rows="7" placeholder="请输入您的留言,最少15个字"></textarea>
            </div>
        </div>
        <div class="col-sm-12 text-center">
            <a href="javascript:void(0);" class="btn btn-info index-submit col-sm-2 col-sm-offset-5">提交</a>
        </div>
    </form>

**上面的2个input。他们各自在col-sm6. 然后里面的label和input分3 和9栅格。
那面的textarea是100%.里面的label和textarea各分3和9栅格和上面对应的比例就是不相同的。**

只能修改bootstrap原百分比,我是没找到更好的方法。因为他们继承的百分比不是相同的。
我加了以下代码,里面的百分比是试出来的。如果大家有更好的方法欢迎分享。

@media (min-width: 768px){
    #index-textarea textarea{
        width: 112.5%;
    }
    #index-textarea label{
        width: 12%;
    }
}

直接修改label和input,增加col-md-2和col-md-4
label和textarea 增加col-md-2 和col-md-10


你代码贴的都不对,和上面的页面对不上。。。
不过我想应该是:

<div class="form-group col-sm-12">
    <label for="dsa" class="control-label" class="col-md-3">留言</label>
        <div class="col-md-9">
            <textarea class="form-control" rows="7" placeholder="请输入您的留言,最少15个字">    </textarea>
       </div>
</div>
【热门文章】
【热门文章】