当有足够的空间时，在右边漂浮一张桌子

时间：2015-05-13 13:18:38

标签： html css twitter-bootstrap twitter-bootstrap-3

我会让图片自己说话。 thedream.png 左边是现在的样子。 正确的是我希望它看起来像假设分辨率足以适应桌子。此表应该在字段下面。

以下是jsfiddle 

.table {
  border: 1px solid black;
  max-width: 400px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div>
    <h4 class="text-center"><strong>Header</strong></h4>

    <form class="form-horizontal">
      <div class="form-group">
        <label for="f1" class="col-sm-2 control-label">Field 1:</label>
        <div class="col-sm-4">
          <input type="text" id="f1" class="form-control" />
        </div>
      </div>
      <div class="form-group">
        <label for="f2" class="col-sm-2 control-label">Field 2:</label>
        <div class="col-sm-4">
          <input type="text" id="f2" class="form-control">
        </div>
      </div>
      <div class="form-group">
        <label for="f3" class="col-sm-2 control-label">Field 3:</label>
        <div class="col-sm-4">
          <input type="text" id="f3" class="form-control">
        </div>
      </div>
      <div class="form-group">
        <label for="f4" class="col-sm-2 control-label">Field 4</label>
        <div class="col-sm-4">
          <input type="text" id="f4" class="form-control">
        </div>
      </div>
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
              <th>Header 4</th>
            </tr>
          </thead>
          <tbody>
            <tr class="active">
              <th>Item 1</th>
              <td>0.08</td>
              <td>EUR</td>
              <td>100.10</td>
            </tr>
            <tr>
              <td>Item 2</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>Item 3</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>Item 4</td>
              <td>0</td>
              <td>USD</td>
              <td>0.1</td>
            </tr>
            <tr class="active">
              <th>Item Total Value</th>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <th>Item 5</th>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="active">
              <th>VAT</th>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <th>Item 6</th>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    </form>
  </div>
</div>

4 个答案:

答案 0 :(得分：2)

更新的答案

我会将您的.form-group DIV和您的.table-responsive DIV用适当的col-*-*类封装在自己的DIV中。 

<div class="col-md-6">
    <div class="form-group></div>
    <div class="form-group></div>
    <div class="form-group></div>
    <div class="form-group></div>
</div>
<div class="col-md-6">
    <div class="table-responsive"></div>
</div>

查看更新的jsFiddle：https://jsfiddle.net/a4hn9dgb/3/

请注意，我将<input>的DIV包装器上的类调整为col-md-10，以便标签和DIV包装器总共12列。这将确保它们占据其父.col-md-6 DIV的全宽。

可能会有一些微调，但这看起来就像你需要的那样。

答案 1 :(得分：1)

我刚刚添加了<div class="col-md-8">此标记 DEMO 

<div class="container">

             <h4 class="text-center"><strong>Header</strong></h4>
     <div class="col-md-8"> 
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="f1" class="col-sm-2 control-label">Field 1:</label>
                    <div class="col-sm-4">
                        <input type="text" id="f1" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="f2" class="col-sm-2 control-label">Field 2:</label>
                    <div class="col-sm-4">
                        <input type="text" id="f2" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label for="f3" class="col-sm-2 control-label">Field 3:</label>
                    <div class="col-sm-4">
                        <input type="text" id="f3" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label for="f4" class="col-sm-2 control-label">Field 4</label>
                    <div class="col-sm-4">
                        <input type="text" id="f4" class="form-control">
                    </div>
                </div>
                    </div>
                     <div class="col-md-4"> 
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Header 1</th>
                                <th>Header 2</th>
                                <th>Header 3</th>
                                <th>Header 4</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="active">
                                <th>Item 1</th>
                                <td>0.08</td>
                                <td>EUR</td>
                                <td>100.10</td>
                            </tr>
                            <tr>
                                <td>Item 2</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>Item 3</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>Item 4</td>
                                <td>0</td>
                                <td>USD</td>
                                <td>0.1</td>
                            </tr>
                            <tr class="active">
                                <th>Item Total Value</th>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <th>Item 5</th>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr class="active">
                                <th>VAT</th>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <th>Item 6</th>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                    </div>
            </form>

    </div>

答案 2 :(得分：0)

首先，您必须创建一个包含.form-group的容器div，然后将float:left添加到新的容器div中。

 .your-new-container{
    float:left;
 }

答案 3 :(得分：-2)

这是样式问题，您必须编辑CSS才能解决此问题。

相关问题
最新问题