Question

当我将<YTdisplay />放在引导程序Jumbotron中时，为什么我的css会搞砸。我认为Jumbotron应该适合插入其中的任何内容。但它只是漂浮在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 {告诉浏览器：＆＃34;在.video-item div中，对div＆＃34;中的所有图像执行以下操作，这可能过于宽泛。尝试将这些行更改为.video-item > img，这意味着：只有DIRECT孩子。

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

（ReactJS）将组件插入另一个组件后CSS发生了变化

1 个答案: