All geek questions in one place

Bootstrap 3 right aligns the selected input group

I can’t figure out how to correctly align input groups in bootstrap 3. No matter what I try, it aligns to the right. If you look at the fiddle below, I will try to align the selection inputs and buttons to the right of the gray window. Any help would be greatly appreciated.

fiddle

<body> <div class="container"> <div class="row"> <div id="header-right-container" class="col-lg-3 col-md-4 col-sm-4 col-xs-12" style="background-color: #eee;"> <div class="row"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span> <select class="form-control input-sm" style="width:150px"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select> </div> </div> <div class="row"> <div class="btn-group"> <a id="headerUserButton" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" href="##"> <i class="glyphicon glyphicon-user"></i> User Name <span class="caret"></span> </a> <ul class="dropdown-menu"> <!-- dropdown menu links --> <li><a href="#">Option A</a></li> <li><a href="#">Option B</a></li> <li><a href="#">Option C</a></li> </ul> </div><!--- /.btn-group ---> </div> </div> </div> </div> </body>
+6
source share
2 answers

Add pull-right to your input-group and btn-group . Then move style="width:150px" from form-control to input-group .

Here is the violin .

+14
source

Add a width to the input group and place it to the right. The selection will be snapped to the right.

http://jsfiddle.net/MGD2y/

HTML:

 <body> <div class="container"> <div class="row"> <div id="header-right-container" class="col-lg-3 col-md-4 col-sm-4 col-xs-12" style="background-color: #eee;"> <div class="row"> <div class="col-md-4 pull-right"> <div class="input-group pull-right" style="width: 200px;"> <span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span> <select class="form-control input-sm" style="width:150px"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select> </div> </div> </div> <div class="row"> <div class="btn-group"> <a id="headerUserButton" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" href="##"> <i class="glyphicon glyphicon-user"></i> User Name <span class="caret"></span> </a> <ul class="dropdown-menu"> <!-- dropdown menu links --> <li><a href="#">Option A</a></li> <li><a href="#">Option B</a></li> <li><a href="#">Option C</a></li> </ul> </div><!--- /.btn-group ---> </div> </div> </div> </div> </body>
+1
source

Source: https://habr.com/ru/post/970471/

More articles:


All Articles