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

Question

So basically I'm trying to get these panels to show on the side of the page. It's easier to show whats happening than to explain it:

I've tried everything I could think of to get those panels over to the side. It's probably really simple, alas I'm out of ideas.

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <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>

Answer 1

Bootstrap uses a 12 column grid. The way you've lined it up its 15 columns so it's wrapping.

Try this.

<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>