rongliangzi_thu
2018-12-14 05:45
采纳率: 33.3%
浏览 1.7k

bootstrap如何让form-inline内的两个div分别左居中右居中?

使用angular2+bootstrap4做前端,有一行包括文字,下拉菜单select,按钮button三种元素,希望做出的效果是,文字左对齐,下拉菜单和按钮右对齐。
现在我把左边文字和右边下拉菜单按钮分别放到2个div中,再包一层带有form-inline的div,但是这种方法只能让两个子div左对齐,F12看了下发现form-inline带有display:flex属性,现在的效果是这样的
图片说明

但是我希望的效果是这样的
图片说明

目前的代码如下(代码里简洁起见select只保留了一个),请问该如何修改:

<div class="form-inline mx-4 border border-primary" style="">
        <div>
            <label class="mx-2">{{unit_name}}</label>
        </div>
        <div class="border border-primary">
            <select class="custom-select mx-2 select-userlist">
                <option selected>用户类别</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
            <button class="btn btn-primary mx-2 button-userlist" >
                搜索
            </button>
            <button class="btn btn-primary mx-2 button-userlist" >
                导出
            </button>
        </div>
    </div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • o(╯□╰)o ! 2018-12-14 07:22
    已采纳

    用 bootstrap的网格系统

    <div class="container-fluid">
    <div class="row">
        <div class="col-md-2" >
            供电局
        </div>
        <div class="col-md-9" style="text-align:right;">
            <button type="button" class="btn btn-primary btn-sm">按钮</button>
        </div>
    </div>
    </div>
    
    点赞 评论

相关推荐 更多相似问题