(ReactJS) CSS 将组件插入另一个组件后发生变化

Question

当我将 <YTdisplay /> 粘在 bootstrap Jumbotron 中时，为什么我的 css 会乱七八糟。我认为 Jumbotron 应该适合插入其中的任何东西。但它只是漂浮在超大屏幕上。有什么建议吗？

import React from 'react';
import { Jumbotron } from 'react-bootstrap';
import YTdisplay from './youtube_display';

const Media = () => {
  return (
    <Jumbotron>
      <YTdisplay />
    </Jumbotron>
  );
};

export default Media;

CSS

/* ******************************
 media area css
****************************** */

.search-bar {
  margin: 20px;
  text-align: center;
}

.search-bar input {
  width: 75%;
}

.video-item img {
  max-width: 64px;
}

.video-detail .details {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.list-group-item {
  cursor: pointer;
}

.list-group-item:hover {
  background-color: #eee;
}

Answer 1

您提到 div 不会根据内容进行缩放。尝试将 display: block; 设置为父 div.

此外，这样的声明：.video-item img { 告诉浏览器："in the .video-item div, do the following to ALL images inside the div"，这可能过于宽泛。尝试将这些行更改为类似 .video-item > img 的内容，这意味着：仅 DIRECT 子项。

如果您想查看完整的工作示例，请在此处创建 jsfiddle 和 post。

(ReactJS) CSS 将组件插入另一个组件后发生变化

(ReactJS) CSS changes after inserting a component into another component

javascript

twitter-bootstrap

reactjs

react-bootstrap