Question

如何让请求按钮始终拥抱左侧，当页面太宽时，它会向右移动。

<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

您应该将此部分放在“容器流体”中。 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>

Answer 2

您错误地使用了.form-group，可能会考虑更新您对Bootstrap的表单语法（http://getbootstrap.com/css/#forms）的理解。下面是代码的重新设计，以实现类似的布局。

＆＃13;

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

＆＃13;

在上面的代码中，我已经替换了您对.form-group的大部分使用，并将您的下拉按钮移动到.input-group，因此可以将其视为相邻元素的一部分（在此例如你的<pre>标签。

页面太宽时，Bootstrap按钮移动到右侧

2 个答案: