Question

为什么我的html元素会被另一个重叠？在中型和大型屏幕上，它可以正常显示，但在小屏幕上会重叠。

我正在使用bootstrap。

请参阅截图。这里我给出三个截图。看到第一个好的。蓝色背景是父div（import plotly.offline as po import plotly.graph_objs as go from plotly import tools fig = tools.make_subplots(rows=5, cols=1, shared_xaxes=True, subplot_titles=['plot1', 'plot2', 'plot3', 'plot4', 'plot5']) xval = [i for i in range(10)] for p in range(5): yval = [x**(p+1) for x in xval] fig.append_trace(go.Scatter(mode='lines', x=xval, y=yval, name='y = x^{}'.format(p+1)), p+1, 1) fig['layout'].update(title='Test', height=1000, width=1500, showlegend=True, margin=go.Margin(l=150)) po.plot(fig, filename='sample', auto_open=True)），其余是孩子。

我需要帮助来解决这个问题。我是新手。我正在学习在这个平台上提问。我应该提供HTML代码吗？

CSS：

<section id="prime-content">

截图：

enter image description here

Answer 1

尝试改变这段代码：

<div class="col-2 col-xs-12 col-sm-12 col-md-6">
      <div class="pc-header">
        <h2>Posts</h2>
      </div>

Answer 2

enter image description here

<!-- begin snippet: js hide: false console: true babel: true -->
#prime-content {
            background-color: blue;
            margin-top: 15px;
        }

        #prime-content .sidebar-left {
            color: white;
        }

        #prime-content .sidebar-right {
            color: white;
        }

        .pc-header {
            background-color: #FFFF00;
            width: 100%;
            padding: 30px;
            text-align: center;
            margin-bottom: 10px;
        }

        .p-content {
            background-color: #fff;
            padding: 15px;
        }

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body style="background-color:cornflowerblue;">
    <div id="prime-content">
        <div class="container-fluid">
            <div class="row" style="margin-top:15px;">
                <div class="col-md-3 col-lg-3 col-sm-12">
                    <div class="sidebar-left text-center">
                        <h3>Degital Media Houses of Assam</h3>
                        <div class="mh-names">
                            <h4> Total no of members</h4>
                        </div>
                        <p class="mh-name"> Total no of members</p>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6" style="margin-bottom:15px">
                    <div class="pc-header">
                        <h2>Posts</h2>
                    </div>
                    <div class="p-content">
                        <div class="media border">
                            <img src="https://cdn1.iconfinder.com/data/icons/avatar-2-2/512/Salesman_1-512.png" alt="Admin" class="mr-3 mt-3 rounded-circle" style="width:60px;">
                            <div class="media-body">
                                <h4>Admin <small><i>, Posted on May 19, 2018</i></small></h4>
                                <p>
                                    The JOURNALIST ASSOCIATION OF INDIA (JAI) (Non-Profit Organization) is working and fighting to protect for freedom of expression, under the valuable guidance of H K Sethi since last more than 20 years. Journalist Association of India under the flagship
                                    of Journalists Federation of India is fighting cesslessly for the Journalists... c scrutiny...
                                </p>
                                <a href="#" class="btn btn-primary">Read More &rarr;</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-3">
                    <input type="text" class="form-control" placeholder="Search directory">
                    <div class="sidebar-right">
                        <h3 class="text-center">Members</h3>
                        <h4 class="text-center"> Total : </h4>
                        <input type="text" class="form-control" placeholder="Search member"><br />
                        <div class="form-group">
                            <label for="exampleFormControlSelect1">Example select</label>
                            <div class="sort-items">
                                <select id="sort" class="form-control">
                                    <option>By Names</option>
                                    <option>Newest first</option>
                                    <option>Oldest first</option>
                                    <option>By numbers</option>
                                </select>
                            </div><br />
                            <div class="m-names">
                                <h4>1. Durlav Gogoi </h4>
                                <div style="margin-left:20px;">
                                    <p>Media House : North-East Now</p>
                                    <p>Member since : June, 2018</p>
                                    <p>Contact : Not available</p>
                                    <p>Hailed from : Sivasagar</p>
                                </div>
                            </div>
                            <div class="m-names">
                                <h4>2. Rajen Sarmah </h4>
                                <div style="margin-left:20px;">
                                    <p>Media House : North-East Now</p>
                                    <p>Member since : June, 2018</p>
                                    <p>Contact : Not available</p>
                                    <p>Hailed from : Nalbari</p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

一个html元素与另一个重叠。怎么解决？

2 个答案: