代码之家 › 专栏 › 技术社区 › Mohsin

bootstap 4崩溃一半不能正常工作停止然后打开

bootstrap-4 css html jquery javascript

Mohsin · 技术社区 · 7 年前

我在一次崩溃中崩溃了5个div这就是原因吗??因为在W3学校它工作得很好。。。如果我把折叠改成面板。。。

https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp

$(document).ready(function() {
    $(".logo-area").click(function() {
        $(this).toggleClass("new-p");
    });
});

#collapseOne {
    width: 100%;
    padding-top: 7%;
    padding-bottom: 5%;
    z-index: 200;
    position: fixed;
    background-color: #F4F4F4;
    color: black;
    text-align: center;
}

#collapseOne div {
    display: inline-block;
    margin: 3%;
}

#collapseOne p {
    font-weight: bold;
    font-size: 36px;
    color: black;
}

#collapseOne span {
    color: black;
}

#collapseOne hr {
    width: 50%;
    background-color: black;
}

.new-p {
    color: black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="logo-area" id="fixedButton" for="collapseOne" data-toggle="collapse"
     href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <input type="image" src="images/creabaco-log2.png">
    <p class="logo-p">crebaco</p>
</div>

<div class="collapse" id="collapseOne">
    <div>
        <a href="index.html">
        <p>Crebaco.</p>
        <span>Overview.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="test.html">
        <p>Services.</p>
        <span>What we do.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="about.html">
        <p>About.</p>
        <span>Who we are.</span>
        <hr>
        </a>
    </div>

</div>

2 回复 | 直到 7 年前

jaydeep patel 7 年前

因为你的付出 padding-top: 7%; 或 padding-bottom: 5%; #collapseOne .

这就是你顺利发挥作用的原因。所以请删除这个css。

如果您试图在内容之间留出空间,请将此css添加到您的子id中,例如:

#collapseOne div{padding: 4% 0;}

希望能帮上忙。

	$(document).ready(function() {
    $(".logo-area").click(function() {
        $(this).toggleClass("new-p");
    });
});

	#collapseOne {
    width: 100%;
    z-index: 200;
    position: fixed;
    background-color: #F4F4F4;
    color: black;
    text-align: center;
}

#collapseOne div {
    display: inline-block;
    margin: 3%;
    padding: 4% 0;
}

#collapseOne p {
    font-weight: bold;
    font-size: 36px;
    color: black;
}

#collapseOne span {
    color: black;
}

#collapseOne hr {
    width: 50%;
    background-color: black;
}

.new-p {
    color: black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="logo-area" id="fixedButton" for="collapseOne" data-toggle="collapse"
     href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <input type="image" src="images/creabaco-log2.png">
    <p class="logo-p">crebaco</p>
</div>

<div class="collapse" id="collapseOne">
    <div>
        <a href="index.html">
        <p>Crebaco.</p>
        <span>Overview.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="test.html">
        <p>Services.</p>
        <span>What we do.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="about.html">
        <p>About.</p>
        <span>Who we are.</span>
        <hr>
        </a>
    </div>

</div>

Jatin Kathuria 7 年前

不要给collapseOne id赋值,而是给它的子类赋值。这就是在动画中创建一个混蛋的原因。尝试为内部类提供填充。