侧栏引导程序中的显示面板

Question

所以基本上我试图让这些面板显示在页面的一侧。显示发生的事情比解释它更容易：

我已经尝试了所有我能想到的东西让这些面板偏向一边。这可能很简单，唉，我没有想法。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="big-button-grp">
    <div class="btn-group big-button">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action 1<span class="caret"></span>

      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action 1</a>

        </li>
        <li><a href="#">Another action</a>

        </li>
        <li><a href="#">Something else here</a>

        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a>

        </li>
      </ul>
    </div>
    <div class="btn-group big-button">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action 2 <span class="caret"></span>

      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action 2</a>

        </li>
        <li><a href="#">Another action</a>

        </li>
        <li><a href="#">Something else here</a>

        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a>

        </li>
      </ul>
    </div>
    <div class="btn-group big-button">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action 3 <span class="caret"></span>

      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action 3</a>

        </li>
        <li><a href="#">Another action</a>

        </li>
        <li><a href="#">Something else here</a>

        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a>

        </li>
      </ul>
    </div>
  </div>
</div>
<hr>

Answer 1

Bootstrap使用12列网格。你把它的15根柱子排成一排的方式，这样它就会被包裹起来。

试试这个。

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <form method="post" class="form-horizontal" action="<?php echo htmlspecialchars(trim($_SERVER["PHP_SELF"], '.php'));?>">
                <fieldset>
                    <legend>example</legend>
                    <div class="form-group">
                       <label for="inputEmail" class="col-lg-2 control-label"></label>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail" class="col-lg-2 control-label">Name</label>
                        <div class="col-lg-9">
                            <input type="text" name="name" value="" class="form-control" id="name" placeholder="Name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="select1" class="col-lg-2 control-label">example</label>
                        <div class="col-lg-9">
                            <select name="select1" class="form-control" id="select1">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="select2" class="col-lg-2 control-label">example</label>
                        <div class="col-lg-9">
                            <select name="select2" class="form-control" id="select2">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="select3" class="col-lg-2 control-label">example</label>
                        <div class="col-lg-9">
                            <select name="select3" class="form-control" id="select3">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="textArea" class="col-lg-2 control-label">example</label>
                        <div class="col-lg-9">
                            <textarea name="textarea" class="form-control" rows="7" id="textArea" placeholder=""></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-9 col-lg-offset-2">
                            <button type="reset" class="btn btn-default">Cancel</button>
                            <button type="submit" class="btn btn-primary">Go!</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading</div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
        </div>
    </div>
</div>