當頁面太寬時，自舉按鈕移動到右側

Question

如何讓請求按鈕始終擁抱左側，當頁面太寬時向右移動。

https://jsfiddle.net/DTcHh/34953/

<div class="request-section" hidden="" style="display: block;"> 
    <div class="panel-body"> 
     <label>Arguments</label> 
     <div class="form-group form-inline"> 
      <div class="form-group"> 
       <input type="text" class="form-control arg-form" placeholder="source" data-arg="source"> 
      </div> 
     </div> 
     <label>Body</label> 
     <div class="form-group"> 
      <div class="col-sm-11" style="padding-left: 0px;"> 
       <pre class="body-pre" contenteditable="true"></pre> 
      </div> 
      <div class="dropdown col-sm-1"> 
       <button class="btn btn-default dropdown-toggle body-content-type-btn" type="button" data-toggle="dropdown" data-content-type="application/json">application/json <span class="caret"></span></button> 
       <ul class="dropdown-menu"> 
        <li><a>application/json</a></li> 
        <li><a>text/plain</a></li> 

       </ul> 
      </div> 
     </div> 
     <a class="btn btn-default">Request</a> 
    </div> 
    <div class="panel-footer"> 
     <pre style="max-height: 750px; background-color: snow">No content</pre> 
    </div> 
</div> 

Answer 1

您使用.form-group不當，可能會考慮更新你的引導程序的形式語法（http://getbootstrap.com/css/#forms）的理解。以下是您的代碼的重新工具，以實現類似的佈局。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel panel-default"> 
 
\t <div class="panel-heading"> 
 
\t \t Your Panel Heading 
 
\t </div> 
 
\t 
 
\t <div class="panel-body"> 
 
\t \t <label class="control-label">Arguments</label> 
 
\t \t <div class="form-inline"> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <input type="text" class="form-control arg-form" placeholder="source" data-arg="source"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <br /> 
 
\t \t 
 
\t \t <label class="control-label">Body</label> 
 
\t \t <div class="input-group"> 
 
\t \t \t <pre class="form-control body-pre" contenteditable="true"></pre> 
 
\t \t \t <div class="input-group-btn"> 
 
\t \t \t \t <button class="btn btn-default dropdown-toggle body-content-type-btn" type="button" data-toggle="dropdown" data-content-type="application/json">application/json <span class="caret"></span></button> 
 
\t \t \t \t <ul class="dropdown-menu dropdown-left"> 
 
\t \t \t \t <li><a>application/json</a></li> 
 
\t \t \t \t <li><a>text/plain</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t 
 
\t \t <br /> 
 
\t \t 
 
\t \t <a class="btn btn-default">Request</a> 
 
\t </div> 
 

 
\t <div class="panel-footer"> 
 
\t \t <pre style="max-height: 750px; background-color: snow">No content</pre> 
 
\t </div> 
 
</div>

在上面的代碼我已經更換了大部分的使用.form-group的以及移動您的下拉按鈕成.input-group，因此它可以被認爲是相鄰的元件的一部分（在本遇到你的<pre>標籤）。

Answer 2

你應該把這個節中的 「容器流體」。 read this

例如：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-4"> your button part </div> 
     <div class="col-sm-8"> your text part </div> 
    </div> 
</div>