【问题标题】:Why Bootstrap carousel caption visible in development but not production?为什么 Bootstrap 轮播标题在开发中可见但在生产中不可见?
【发布时间】:2021-03-26 11:11:27
【问题描述】:

我正在开发一个投资组合网站,为此我在 Bootstrap Carousel 中显示屏幕截图。

在 React Development Server Captions 中正确渲染和操作:

npm run start

Development Server Browser

生产构建,阳离子在 HTML 中,但不可见:

npm run build
serve -s build

Production Server Brower

<Carousel key= {'in-depth'+projectIndex}  activeIndex={pageIndex} onSelect={(i,e)=>{setPageIndex(i); console.log('select-called'); forceUpdate();}} className='col-lg-8 col-md-10' style={{margin: '1.0rem auto',}}>
            {projects[projectIndex].pages.map((page,i) => 
                <Carousel.Item key={projects[projectIndex].pages[i].target+i+projects[projectIndex].title} interval={5000} style={{maxHeight: '75vh', overflowY: page.type == 'vertical-scroll' ? 'scroll' : 'hidden'}} class={i==0 ? 'active' : ''}>
                {page.type == 'video' ?
                <Player playing src={conceptVersion}  height='420' width='720' controls={true} style={{margin: '0 auto', textAlign: 'center'}} className='project-image'/>
                : <img  className="d-block w-100 project-image" src={projects[projectIndex].pages[i].image} alt={projects[projectIndex].pages[i].target} />}
                    <h3 className='carousel-title' >{projects[projectIndex].title}</h3>
                    {page.type == 'vertical-scroll' ? <div></div>
                    : <div id='describe-box' className='carousel-description-box' style={{}}>
                        <p className='carousel-description' >{projects[projectIndex].pages[i].description}</p>
                    </div>}
                </Carousel.Item>)}
        </Carousel>

源代码:https://github.com/ethanjohnsrud/portfolio/blob/main/src/Projects/Projects.jsx

直播网站:https://5fd8f2548eaa992466b41f48--ethan-johnsrud-portfolio.netlify.app/

知道为什么会有差异,我该如何解决这个问题?

【问题讨论】:

    标签: css reactjs react-bootstrap display


    【解决方案1】:

    opacity: 1%; 引起--> 0% 完全透明。在 Projects.css 中:.carousel-description 块

    【讨论】:

    • 非常感谢,这让我发疯了。它在 CSS 中被列为 90%,所以我必须追踪它的变化。
    猜你喜欢
    • 2017-07-16
    • 2015-11-19
    • 2020-02-05
    • 1970-01-01
    • 1970-01-01
    • 2018-09-26
    • 2021-11-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多