Question

我使用Bootstrap CSS开发了一个小UI。我远远不是专家。不幸的是我的右侧面板存在问题。

我已经在Jsfiddle上推送了我的代码 - ＆gt; https://jsfiddle.net/camsellem/e4dddfw3/

    <div class="col-xs-3 col-lg-3">
        <div class="panel panel-info" style="position:fixed;">
            <div class="panel-heading">Suggested products</div>
            <div class="panel-body">
                <div id="products-suggest" class="list-group"></div>
            </div>
        </div>
    </div>

这并不明显，因为我们无法全屏打开它，但实际上正确的面板名为＆＃34;建议的产品＆＃34;永远不会填满整个空间。面板末端与容器末端之间始终存在空白间隙。我尝试了不同的布局但没有成功。它在这个屏幕截图中更加明显。

任何帮助表示感谢。

干杯

Answer 1

在此课程中添加此css

.panel.panel-info {
    width: 23%;
}

https://jsfiddle.net/e4dddfw3/3/

Answer 2

Working fiddle

向此fixed添加课程<div class="col-xs-3 col-lg-3 fixed">并添加以下css

.col-xs-3.col-lg-3.fixed{ 
   position: fixed;
   right: 0;
   width: 25%;
}

从position:fixed

中删除<div class="panel panel-info" style="position:fixed;">

Answer 3

定位到panel-info类的位置导致了这个问题：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src="img/talend-logo.png">
    </div>
    <div class="col-md-6 text-right">
      <!-- <img src="img/cloudera-logo.png"> -->
      <img src="img/hortonworks-logo.png">
    </div>
  </div>
  <div class="row">
    <div class="row" style="padding-top:50px;">
      <div class="col-xs-9 col-lg-9">
        <div class="alert alert-info" style="padding:15px">
          For data-driven businesses it’s no longer enough just to have the right information, they need the right information, right now.
          <br \>
          <br \> Take Amazon for example, they found that delaying their data by just one second could end up costing them $1.6 billion in sales. Why? Today’s customers are accustomed to incredibly fast-paced standards when it comes to online services. Businesses
          that can’t serve up pricing and product recommendations in real-time fall behind.
          <br \> The business benefits of transforming into a data-driven organization are unprecedented. So how should you go about putting your big data to work? Talend 6, the first integration platform on Spark, is a good start.
          <br \>
          <br \> Talend 6 on Spark allows you to take full advantage of real-time analytics, and employ features such as predictive recommendations, dynamic pricing and more.
        </div>
        <div class="row">
          <div class="col-xs-6 col-lg-4">
            <div class="thumbnail">
              <img class="group list-group-image" src="img/online-offer.png" alt="" />
              <div class="caption">
                <h4 class="group" style="color:#00A3AD">Basics Bundle</h4>
                <p class="group">
                  200GB Data + unlimited standard local and national calls + Fetch TV + 3 months of Stan bonus
                </p>
                <div class="row">
                  <div class="col-xs-12 col-md-6">
                    <p class="lead" style="color:#00A3AD">From $70</p>
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <input type="hidden" class="product-id" value="1">
                    <input type='submit' name=".$post->ID." value="Submit" class="btn btn-success product-click">
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-xs-6 col-lg-4">
            <div class="thumbnail">
              <img class="group list-group-image" src="img/online-offer.png" alt="" />
              <div class="caption">
                <h4 class="group" style="color:#00A3AD">Big Bundle</h4>
                <p class="group">
                  Unlimited data + unlimited talk to selected countries + Fetch TV + 3 months of Stan bonus
                </p>
                <div class="row">
                  <div class="col-xs-12 col-md-6">
                    <p class="lead" style="color:#00A3AD">From $95</p>
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <input type="hidden" class="product-id" value="2">
                    <input type='submit' name=".$post->ID." value="Submit" class="btn btn-success product-click">
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-xs-6 col-lg-4">
            <div class="thumbnail">
              <img class="group list-group-image" src="img/online-offer.png" alt="" />
              <div class="caption">
                <h4 class="group" style="color:#00A3AD">Entertainement Starter</h4>
                <p class="group">
                  Unlimited Data + Unlimited std calls and national calls + Fetch TV + 3 months of Stan bonus
                </p>
                <div class="row">
                  <div class="col-xs-12 col-md-6">
                    <p class="lead" style="color:#00A3AD">From $90</p>
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <input type="hidden" class="product-id" value="3">
                    <input type='submit' name=".$post->ID." value="Submit" class="btn btn-success product-click">
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-xs-6 col-lg-4">
            <div class="thumbnail">
              <img class="group list-group-image" src="img/online-offer.png" alt="" />
              <div class="caption">
                <h4 class="group" style="color:#00A3AD">Entertainement Bundle</h4>
                <p class="group">
                  Unlimited Data + Unlimited standard calls and national calls + Fetch TV + 3 months of Stan bonus
                </p>
                <div class="row">
                  <div class="col-xs-12 col-md-6">
                    <p class="lead" style="color:#00A3AD">From $95</p>
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <input type="hidden" class="product-id" value="4">
                    <input type='submit' name=".$post->ID." value="Submit" class="btn btn-success product-click">
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-xs-6 col-lg-4">
            <div class="thumbnail">
              <img class="group list-group-image" src="img/online-offer.png" alt="" />
              <div class="caption">
                <h4 class="group" style="color:#00A3AD">Ultimate Bundle</h4>
                <p class="group">
                  Unlimited Data + Unlimited standard local and national calls + Unlimited standard national calls to mobiles + Unlimited standard international calls to selected countries + Fetch TV + 3 months of Stan bonus
                </p>
                <div class="row">
                  <div class="col-xs-12 col-md-6">
                    <p class="lead" style="color:#00A3AD">From $115</p>
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <input type="hidden" class="product-id" value="5">
                    <input type='submit' name=".$post->ID." value="Submit" class="btn btn-success product-click">
                  </div>
                </div>
              </div>
            </div>
          </div>



        </div>
        <!--/row-->
      </div>
      <!--/.col-xs-12.col-sm-9-->
      <div class="col-xs-3 col-lg-3">
        <div class="panel panel-info" style="width:100%">
          <div class="panel-heading">Suggested products</div>
          <div class="panel-body">
            <div id="products-suggest" class="list-group"></div>
          </div>
        </div>
      </div>
    </div>
    <!--/row-->
    <hr>
  </div>
  <!--/.container-->
</div>

＆＃13;

Answer 4

你必须修改这条线 <div class="col-xs-3 col-lg-3">至<div class="col-xs-3 col-lg-3 pull-right">

引导问题。为什么我的右侧面板不会填满整个空间

4 个答案: