Question

我有一个非常小的问题，但我一直试图解决它几个小时没有运气。我有一个使用bootstrap的简单页面。以下是截图。

在此屏幕截图中，我的浏览器窗口最大化。正如您所看到的那样，搜索栏位于中心位置，而底部3个最喜欢的玩家的名字则没有。现在，当我使浏览器窗口大小的一半。这就是我所看到的。

现在搜索栏不再是中心，喜欢的玩家的名字居中。这绝对不是应有的回应。

问题我发现了两个问题。一个是搜索栏在某种程度上不具有相关性，并且玩家的名字不是。所以我尝试了各种css，将div设为绝对和相对，并用填充物搞砸但没有运气。

我确信我在这里遗漏了一些东西，这可能是一个愚蠢的问题，但它会对我有所帮助，因为我已经被困在这一段很久了。

我已将代码上传到BOOTPLY

以下是我的HTML代码：

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

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

Answer 1

现在不在我的电脑上，所以我将不得不更多地回答一下，但有一件事跳出来对我说：而不是使用带引导列的空div，使用偏移;例如，col-lg-offset-1。

编辑：扩大我的答案。

这是link to my forked version of your Bootply，显示了我的更改。以下是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的布局类来设置您的布局 - 添加自定义positions以及其他类似的东西可能真的会弄乱页面，正如你所见。

我不会详细解释我所做的改变，希望你能看看并弄清楚是什么让它起作用，但我确实有一些注意事项：

首先，不是lg，而是最好定义至少一个xs行为，然后逐步实现更大的屏幕。只为您的大部分商品定义col-lg-x类，您不会为低于该尺寸的视口定义响应式布局。

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

<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类（除了常规{ {1}}类）。此外，与对齐相关：您可以将bootstrap的col-{size}-x类添加到您想要居中的位置，而不是使用text-align: center。

我的版本中唯一的问题是收藏夹框在小屏幕上重叠 - 这是因为它们定义了大小。我会留给你解决。

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

Answer 2

不要复制，通过查看此示例了解其工作原理

这绝对不是正确的方法，但给你一个小小的想法！

有问题吗？评论了！：）

#searchPage-small-title {
  color: rgba(128, 128, 128, 1);
  font-size: 16px;
  font-family: "Open Sans";
  text-align: center;
  font-weight: 700;
}
#searchPage-title {
  color: rgba(128, 128, 128, 1);
  font-size: 50px;
  font-family: "Open Sans";
  text-align: center;
}
.searchPage-box {
  text-align: center;
}
.searchPage-input {
  width: 80%;
  border-style: solid;
  border-radius: 6px;
  border-color: rgba(192, 189, 178, 1);
  height: 59px;
  font-size: 18px;
  text-indent: 32px;
}
.fa-star {
  color: rgba(220, 118, 28, 1);
}
#searchPage-favorites-title {
  color: rgba(128, 128, 128, 1);
  font-size: 18px;
  font-family: "Open Sans";
  text-align: center;
  font-weight: 400;
  margin-top: 40px;
  margin-bottom: 30px;
}
.searchPage-favorites-item {
  color: rgba(128, 128, 128, 1);
  font-size: 20px;
  font-family: "Open Sans";
  display: inline-block;
  text-align: center;
  font-weight: 800;
  padding-top: 30px;
  height: 115px;
  width: 140px;
  border: 1px solid #444;
  margin: auto 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <!--row I-->
  <div class="row bg-success" style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;">
    <div class="col-lg-1">&nbsp;
    </div>
    <div class="col-lg-10">
      <div id="searchPage-small-title">NBA</div>
    </div>
    <div class="col-lg-1">&nbsp;
    </div>
  </div>

  <!--row II-->
  <div class="row bg-success" style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;">
    <div class="col-lg-1">&nbsp;
    </div>
    <div class="col-lg-10">
      <div id="searchPage-title">Player Portal</div>
    </div>
    <div class="col-lg-1">&nbsp;
    </div>
  </div>

  <!-- row III -->
  <div class="row" style="background-color: #eeede7; padding-bottom:100px;">
    <div class="col-lg-12">
      <div class="searchPage-box">
        <form role="form" class="form" ng-submit="submit()">
          <div class="form-group">
            <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>
        </form>
      </div>
    </div>
  </div>

  <!-- row IV -->
  <div class="row bg-warning" style="background-color: #eeede7; padding-bottom:100px;">
    <div class="col-lg-1">&nbsp;
    </div>
    <div class="col-lg-10">
      <div id="searchPage-favorites-title">FAVORITES</div>
    </div>
    <div class="col-lg-1">&nbsp;
    </div>
  </div>

  <!-- row V -->
  <div class="row" style="background-color: #eeede7; padding-bottom:100px; text-align: center;">
    <div class="col-lg-4 searchPage-favorites-item">
      <i class="fa fa-star">Jordan</i>
    </div>
    <div class="col-lg-4 searchPage-favorites-item">
      <i class="fa fa-star">Lebron</i>
    </div>
    <div class="col-lg-4 searchPage-favorites-item">
      <i class="fa fa-star">Curry</i>
    </div>
  </div>


</div>

修改

以下div具有类col-lg-4，如果可用空间为33,333333％，则表示宽度。此div的第一个孩子也有text-left个班级。如果您将col-lg-4调整为col-lg-12，将text-left的第一个孩子调整为text-center，您将获得所需的结果。

修改并改变下一个css：

.searchPage-box { /* padding-left: 590px; remove */ width: 100%; margin-bottom: 60px; border-radius: 0 0 0 0; }

（来自http://www.bootply.com/zYFA6mqMO1）

<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">  </div> </div> </div> </form> </div> </div>

Answer 3

你应该注意什么：

.searchPage-box {padding-left: 590px}

使用左边填充和设置像素是一个坏主意，因为当屏幕尺寸发生变化时，像素不会自动更改。因此，如果您想要居中，请尝试以下方法：

margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 30% !important;

那些

.searchPage-box

希望我帮助过：）

Answer 4

您在搜索栏周围的div：使用你的css类searchPage-box，那个使用padding left 590px

.searchPage-box {
  padding-left: 590px;
  width: 100%;
  margin-bottom: 60px;
  border-radius: 0 0 0 0;
}

这会导致搜索栏左侧的590px未使用。

Answer 5

<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-10 col-lg-push-1">
        <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>


  <!-- change in code is here -->

    **<div class="row">  
            <div class="col-lg-6 col-md-6 col-sm-4 col-md-offset-2 col-lg-offset-3 col-sm-offset-1 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>

Answer 6

您在页脚div上使用col-sm-2但在width:140px中设置.searchPage-favorites-item时失去了响应行为。删除该规则并.col-sm-4并改为使用.col-sm-offset-3：

<div class="col-sm-2 col-sm-offset-3 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 class="row">
    <div class="col-sm-6 col-sm-offset-3">
        <div class="row">
            <div class="col-sm-2 col-sm-offset-3 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>

对于你的表单有什么问题，如果你想让它居中并且你在最后一行有一列，你也必须在开头有一个（或你设置offset-1）

<div class="row">
    <div class="col-lg-10 col-lg-offset-1 text-center">
        <input 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" type="text">
    </div>
    <div class="col-md-1">
        <!-- using Bootstrap default for button -->

    </div>
</div>

或者只使用.col-lg-12

请记住：使用bootstrap，您很少需要在自定义css中处理布局定位，因为只需使用其类就可以获得很多。你应该只设置颜色，阴影，文字和类似的东西

使Div相对于页面上的其他内容

6 个答案: