Question

我正在尝试在React JS中创建一个具有固定位置的标头。我有这样的事情：

<div className="showroomHeader col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
   <div id="sub-header">
      <div className="logo">Item1</div>
      <div className="cartContent">Item2</div>
      <div className="listContent">Item3</div>
      <div className="statusContent">Item4</div>
   </div>
</div>

css如下：

.showroomHeader{
  min-height: 60px;
  margin-bottom: 30px;
}

#sub-header{
   width: 100%;
   background-color: #ffffff;
   display: inline-block;
   position: fixed;
   z-index: 9999;
}

但我的子标题比showroomHeader更宽。

showroomHeader是这样的：

子标题是：

我的子标题的内容比他的父标题宽，我没有看到我的子标题的所有内容：

有任何建议如何解决？

更新

@media（min-width：1600px）{ 。容器 { 宽度：1570px; }

.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    float: left;
}

.col-xl-12 {
    width: 100%;
}

.col-xl-11 {
    width: 91.66666667%;
}

.col-xl-10 {
    width: 83.33333333%;
}

.col-xl-9 {
    width: 75%;
}

.col-xl-8 {
    width: 66.66666667%;
}

.col-xl-7 {
    width: 58.33333333%;
}

.col-xl-6 {
    width: 50%;
}

.col-xl-5 {
    width: 41.66666667%;
}

.col-xl-4 {
    width: 33.33333333%;
}

.col-xl-3 {
    width: 25%;
}

.col-xl-2 {
    width: 16.66666667%;
}

.col-xl-1 {
    width: 8.33333333%;
}

}

内部div的样式：

.logo, .cartContent{
   display: flex;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.listContent{
   display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.statusContent{
   display: flex;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Answer 1

首先，您已经定义了一个在Bootstrap中不存在的css类。没有xl设备，只有xs，sm，md和lg。请在Bootstrap Grid System了解更多信息。

除此之外，您的代码似乎工作正常。见下面的演示。（查看“整页”）

.showroomHeader {
  min-height: 60px;
  margin-bottom: 30px;
}
#sub-header {
  width: 100%;
  background-color: #ffffff;
  display: inline-block;
  position: fixed;
  z-index: 9999;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="showroomHeader col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div id="sub-header">
    <div class="col-lg-3">Item1</div>
    <div class="col-lg-3">Item2</div>
    <div class="col-lg-3">Item3</div>
    <div class="col-lg-3">Item4</div>
  </div>
</div>

必须有一些其他的CSS导致你面临的问题。你能检查最里面的div元素，看看是否还有其他样式被应用？如果是这样，请将它们发布在这里。

Answer 2

问题在于我认为“display：inline-block;”;尝试阻止;或者你必须改变这样的HTML：

---
title: "references in rmarkdown"
output:
  html_document: default
  pdf_document: default
---

# Header

Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. 

Go back to that [header](#header).

因为内联块不是块元素，所以前后都会有中断，并且它们会发生。

儿童div比父母更宽，位置固定

2 个答案: