使Div与页面上的其他内容相对 [英] Making Div relative to other content on a page

问题描述

我有一个非常小的问题，但我一直在试图修复几个小时，没有运气。我有一个简单的页面，使用引导。以下是屏幕截图。

I am having a very minor issue but i have been trying to fix it for few hours with no luck at all. I have a simple page that uses bootstrap. Following is the screenshot.

在此屏幕截图中，我的浏览器窗口最大化。正如你可以看到，搜索栏居中，底部的3个最喜欢的球员的名字不是。现在，当我使浏览器窗口大小的一半。这是我看到的。

In this screenshot, I had my browser window maximized. As you can see the search bar is centered well and the names of 3 favorite players in the bottom are not. Now when i make the browser window size half of it. This is what i see.

< img src =https://i.stack.imgur.com/A7hcK.pngalt =enter image description here>

现在搜索栏不再是中心，喜欢的球员的名字居中。

Now the search bar no longer is center and the names of favorite players are centered. This is definitely not responsive as it should be.

问题
我发现了两个问题。一个是搜索栏不知何故没有影响，玩家的名字不是。所以我尝试了各种css，使其div是绝对的和相对的，弄乱了填充，但没有运气。

Problem I have identified two issues. One is that the search bar is somehow not releative and the names of the players are not. So I tried various css by making its div to absolute and relative and messed around with padding but no luck.

我相信我在这里缺少的东西，这可能是一个愚蠢的问题，但它会帮助我，因为我一直困在这很长时间现在。

I am sure i am missing something here and this might be a stupid question but it would help me because i have been stuck on this for long while now.

我已经上传我的代码在 BOOTPLY

I have uploaded my code on BOOTPLY

以下是我的HTML代码：

Following is my HTML code:

<div class="container-fluid">
  <div class="row bg-success" style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;">
    <div class="row">
      <div class="col-lg-1">
      </div> 
      <div class="col-lg-10">
        <div id="searchPage-small-title">NBA</div>
    </div>
 </div>

  <div class="row">
    <div class="col-lg-1">
    </div> 
    <div class="col-lg-10">
      <div id="searchPage-title">Player Portal</div>
    </div>
  </div>



<!--   <div class="row">
 -->    <div class="col-lg-4">  
        <div class="searchPage-box text-left">         
            <form role="form" class="form-inline" ng-submit="submit()">           
              <div class="form-group">             
                <div class="row">
                  <div class="col-lg-4">
                    <input type="text" class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" typeahead="sponsor as label(sponsor) for sponsor in sponsorList
                          | filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" required="" name="sponsorName">
                    </div>      
                  <div class="col-md-1">      
                  <!-- using Bootstrap default for button -->

                  </div>                 
                </div>
            </div>  
          </form> 
        </div>      
      </div>
   <!--  </div>  -->












</div>


  <div class="row bg-warning" style="background-color: #eeede7; padding-bottom:100px;">

    <div class="row">
     <div class="col-lg-1">
     </div> 
    <div class="col-lg-10">
      <div id="searchPage-favorites-title" class="row">FAVORITES</div>
    </div>
  </div>

      <div class="row">
      <div class="col-sm-4">
      </div>

      <!-- this favorites are hard-coded for now for purposes of demo -->
      <div class="col-sm-2 searchPage-favorites-item">
            <i class="fa fa-star"></i>
        Jordan
      </div>
      <div class="col-sm-2 searchPage-favorites-item">
            <i class="fa fa-star"></i>
        Lebron
      </div>
      <div class="col-sm-2 searchPage-favorites-item">
            <i class="fa fa-star"></i>
        Curry
      </div>

    </div>



  </div>






</div>

我非常感谢所有建议和方法。

I highly appreciate all suggestions and approaches.

推荐答案

现在不在我的电脑，所以我将不得不更全面地回答一点，但有一件事跳到我：而不是有引导列的空div，使用偏移;例如 col-lg-offset-1 。

Not at my computer now, so I will have to answer more fully in a bit, but one thing that jumps out to me: instead of having empty divs with bootstrap columns, use offsets; for example, col-lg-offset-1.

编辑：扩大我的回答。

这里是链接到我的分叉版本的Bootply ，显示我的更改。以下是bootply的一小部分：

Here is a link to my forked version of your Bootply, showing my changes. The following is a small portion of the bootply:

<div class="row">
  <div class="col-xs-10 col-xs-offset-1">
    <div id="searchPage-small-title">NBA</div>
  </div>
</div>
<div class="row">
  <div class="col-xs-10 col-xs-offset-1">
    <div id="searchPage-title">Player Portal</div>
  </div>
</div>

Yuri的回答很好地解释了你遇到的问题。如果您要使用Bootstrap，一般来说，您只需要 使用Bootstrap的布局类来设置布局 - 添加自定义位置和其他这样的事情真的可以搞砸页面，如你所见。

Yuri's answer does a pretty good job of explaining the issues you're coming up against. If you're going to use Bootstrap, in general, you need to only use Bootstrap's layout classes to set your layout - adding custom positions and other things like that can really mess with the page, as you've seen.

我不会详细解释我做的更改，希望你可以看看和弄清楚是什么使它工作，但我有一些笔记：

I won't go into a detailed explanation of the changes I made, in the hopes that you can have a look and figure out what makes it work, but I do have some notes:

首先，而不是 lg ，最好定义至少一个 xs 行为，并按照你的方式工作到更大的屏幕。通过只为大多数项目定义 col-lg-x 类，您不会为低于该大小的视口定义响应式布局。

First, rather than lg, it's better to define at least an xs behavior, and work your way up to bigger screens. By only defining col-lg-x classes for most of your items, you're not defining a responsive layout for viewports below that size.

其次，有两个地方，你有 row 类直接嵌套在其他行类。这也可能导致问题。预期的使用方法是

Second, there were a couple places where you had row classes nested directly inside other row classes. This can also cause issues. The intended method of use is

<div class="row">
  <div class="col-xs-x">
     <!-- if you need to define another grid inside the above div,
          start another row -->
     <div class="row">
     </div>
  </div>
</div>

第三，正如我在初始响应中提到的，而不是使用列类添加空div自动折叠），在行的第一个div上使用 col- {size} -offset-x 类（除了常规的 {size} -x 类）。此外，与对齐相关：而不是使用 text-align：center ，您只需添加引导程序的 text-center

Third, as I mentioned in my initial response, rather than adding empty divs with column classes (which will be collapsed automatically), use col-{size}-offset-x classes on the first div in the row (in addition to the regular col-{size}-x class). Also, related to alignment: rather than using text-align: center, you can just add bootstrap's text-center class to what you want to center.

我的版本中唯一的问题是收藏夹框在小屏幕上重叠 - 这是因为他们定义的大小。

The only issue in my version is that the favorites box overlap on a small screen - this is because of their defined size. I'll leave that to you to fix.

我希望这个答案帮助了你，如果你对我的回答有任何疑问，请告诉我。

I hope this answer helped you, and please let me know if you have any questions about my answer.

这篇关于使Div与页面上的其他内容相对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！