小编Gor*_*sic的帖子

我有一个固定在侧边栏内的样式单选按钮列表，单击时，将相应的组件从主区域滚动到视图中。单选按钮列表和主区域内的组件都从称为 usedComponents 的状态数组映射，该数组包含组件属性和 id 的对象。假设数组包含 10 个对象，每个对象如下所示：

{
  id: 1,
  group: "header",
  componentType: "headerLogo",
  componentName: "Header 01",
  //...rest of the component properties
}

为了在单选按钮单击时滚动到视图中，我必须在构造函数中创建对组件的引用。我手动为 usedComponents 状态数组中包含的每个组件创建了引用，并将它们绑定到 componentType，如下所示：

this.headerLogo = React.createRef();
this.headerLogoNavigation = React.createRef();
//...etc.

然后我将引用传递给每个相应的组件，并在我的 selectComponentHandler 中设置 scrollIntoView 以调用与主区域组件引用相对应的单选按钮 ID。selectComponentHandler 看起来像这样：

selectComponentHandler = e => {
  const value = Number(e.target.value);
  const id = e.target.id; //returns componentType. For example "headerLogo"
  this.setState(prevState => {
    let selected = prevState.usedComponents
      .filter(item => item.id === value)
      .shift();
    let unSelected = prevState.usedComponents
      .filter(item => item.selected === …

我正在使用此代码来初始化 swiper 滑块。

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 0,
    parallax: true,
    autoplay: 5000,
    speed: 800,
    autoplayDisableOnInteraction: false
}) 

由于滑块位于页面的第四部分内，并且仅在页面向下滚动后才可见，因此我希望仅在滑块进入视口后才开始自动播放。有没有办法做到这一点？

假设我正在制作带有两个 col-lg-6 div 的 bootstrap 4 布局。左边的包含一个图像，右边的包含一堆文本，长度足以使页面可滚动。由于 bootstrap 4 中的 grid 是基于 flex display 属性的，所以左边的 div 会自动垂直拉伸到右边的高度。Bootstrap 4 有一个新的“sticky-top”类，它使用 position:sticky。因此，如果将“sticky-top”类添加到左侧 div 内的图像并向下滚动页面，则图像会随页面滚动，直到到达页面顶部，然后粘在顶部并保持粘性直到其父 div 的底部到达图像的底部，然后图像继续与页面一起滚动。不幸的是，所有现代浏览器仍然不完全支持 position:sticky，所以我想知道是否有跨浏览器兼容的 jQuery 替代品？我尝试通过 jquery 向图像添加一个额外的类，该类将位置更改为固定在 css 中，并在图像到达页面顶部时添加到图像中，然后我尝试在页脚进入视口后将其删除，但是使图像从视口中消失，而不是随着页面滚动，因为在移除附加类后它会弹回到其父 div 的顶部。

<header>header sticks to top</header>
<div>breadcrumbs that scroll along with the page go here</div>
<div class="row">
  <div class="col-12 col-lg-6">
    <img src="image.jpg" class="img-fluid" alt="image">
  </div>
  <div class="col-12 col-lg-6">
    <p>Bunch of random text long enough to make the page scrollable goes here</p>
  </div>
</div>
<footer>Footer stuff goes here</footer>

注意：图像应该只在大网格和超大网格上粘贴，我宁愿不必使用任何插件。

这是一个简单而直接的问题。如何将帖子日期设置为具有相同日期的帖子存档的链接？

我正在构建一个bootstrap 3布局,我正在尝试更改嵌套行的列数,以便嵌套列与顶级列具有相同的宽度.我试过这样的事但无济于事.

<main id="container" class="section">
  <div class="main-body">
    <div class="sidebar">
        <p>content</p>
    </div>
    <div class="main-content">
        <div class="items">
            <div class="item-1">
                <p>content</p>
            </div>
            <div class="item-2">
                <p>Content</p>
            </div>
        </div>
    </div>
  </div>
</main>

.section{
    .container; 
}

.col-sm-2, .col-sm-10, .col-sm-8{
    border: 1px solid black;    
}
.main-body {
  .make-row();
  .sidebar {
    .make-sm-column(2);
  }
  .main-content {
    .make-sm-column(10);
  }
  @grid-columns: 10;
  .items {
    .make-row();
    .item-1{
      .make-sm-column(2);
    }
    .item-2{
      .make-sm-column(8);
    }
  }
  @grid-columns: 12;
}

嵌套行中的网格似乎仍然有12列,我希望它有10列.我在上面找到了上面的例子:文章 这个人在sass中做了这个,我把它改写得更少因为我不是很多sass用户,但不幸的是它没有用.我究竟做错了什么？