侧栏引导中的显示面板

Question

所以基本上我试图让这些面板显示在页面的一侧。它更容易表现出发生了什么，而不是解释它：

我用尽了一切我能想到的到一旁让那些面板。这可能很简单，唉，我没有想法。

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