Bootstrap 3 phải căn chỉnh một nhóm đầu vào được chọn

Tôi không thể tìm ra cách căn chỉnh các nhóm đầu vào được chọn trong bootstrap 3. Không có vấn đề gì tôi thử nó căn chỉnh ở bên phải. Nếu bạn nhìn vào fiddle dưới đây, im cố gắng để sắp xếp các đầu vào chọn và nút ở bên phải của hộp màu xám. Mọi sự trợ giúp sẽ rất được trân trọng.Bootstrap 3 phải căn chỉnh một nhóm đầu vào được chọn

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>

Nguồn

2014-06-06 user1687074

Chỉ cần một chú thích là theo bootstrap [docs] (http://getbootstrap.com/css/#grid) nó là "không hợp lệ" để có bất cứ điều gì khác hơn là 'col' là con của' hàng'. –

Thêm pull-right-input-group của bạn và btn-group. Sau đó, di chuyển style="width:150px" từ form-control đến input-group.

Here's a fiddle.

Nguồn

2014-06-06 17:52:20 ringstaff

hoạt động hoàn hảo! – user1687074

Thêm Width nhập nhóm và đặt một kéo bên phải để nó. Lựa chọn sẽ được gán cho đúng.

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>

Nguồn

2014-06-06 17:17:42

fiddle của bạn không căn chỉnh chính xác. phong cách phải được xóa khỏi thẻ đã chọn cũng như được thêm vào div 'nhóm đầu vào '. cũng là 'col-md-4' mà bạn thêm vào phải được loại bỏ. – ringstaff

thực sự, 'col-md-4' không cần phải được loại bỏ, nhưng để căn chỉnh đúng với nút bên dưới, bao quanh' btn-group' với cùng một cột. [xem này] (http://jsfiddle.net/ringstaff/MGD2y/1/) – ringstaff

moto chính là làm cho nó thẳng hàng. Nó không định dạng mã. –

Bootstrap 3 phải căn chỉnh một nhóm đầu vào được chọn

Trả lời

Các vấn đề liên quan