我正在解决一个烦人的问题：我在页面底部并排放置了3个元素（固定）。我添加了bootstrap4切换开关，以在用户单击图像时仅显示文本，并且它可以工作...但是，不仅将所有图像切换到一个，还可以。我想这不是一个大问题，但经过多次尝试，我失败了。也许有人知道解决方案。这是网页：www.ourway.pl。
.carousel {
margin-left: auto;
margin-right: auto;
width: 100vw;
position: fixed;
bottom: 10px;
}
.card-text {
margin: 5px 5% ;
text-align: justify;
text-justify: auto;
line-height: 25px;
}
.card-img-top {
margin-left: auto;
margin-right: auto;
display: block;
border-radius: 80px;
border: 3px solid rgba(0, 0, 0, 0.4) ;
text-align: center;
align-content: center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/css/tether.min.css" rel="stylesheet"/>
<section class="container-fluid p-0 topcard">
<div class="row justify-content-center" >
<!-- Carousel -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="8000">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<article class="col">
<div class="card carousel-style">
<div class="card-block p-0">
<h2 class="card-title">Rumunia - Sinaia</h3>
<img class="card-img-top opacity" data-toggle="collapse" data-target="#demo" aria-expanded="false" aria-controls="collapseExample" src="/static/rumunia/woloszczyzna/sinaia/cover.jpg" alt="Card image cap" title="Kliknij aby rozwinąć opis">
<p class="card-text collapse" id="demo" >Dziś zapraszamy Was do historycznej krainy zwanej Wołoszczyzną, gdzie u stóp gór Bucegów leży urokliwe miasteczko Sinaia, które upodobała sobie para królewska budujac tu swoją zapierającą dech letnią rezydencję Peleş.</p>
<a class="btn" href="/Rumunia/woloszczyzna/sinaia/opowiesc.html" title="Relacja">Opowieść</a>
<a class="btn" href="/Rumunia/rumunia-wskazowki.html#Sinaia" title="Wskazówki">Wskazówki</a>
<a class="btn" href="/Rumunia/woloszczyzna/sinaia/galeria.html" title="Galeria">Galeria</a>
</div>
</div>
</article>
<article class="col">
<div class="card carousel-style">
<div class="card-block p-0">
<h2 class="card-title">Polska - Promnice i okolice</h3>
<img class="card-img-top opacity" data-toggle="collapse" data-target="#demo2" aria-expanded="false" aria-controls="collapseExample" src="/static/polska/slask/promnice/cover.jpg" alt="Card image cap" title="Kliknij aby rozwinąć opis">
<p class="card-text collapse" id="demo2">Dziś zapraszamy Was na Śląsk, a dokładnie w okolice Promnic, gdzie czeka na Was mnóstwo atrakcji, takich jak pałace, zamki, urokliwa ścieżka wokół jeziora, zagroda żubrów, skansen czy możliwość zwiedzania Tyskiego Browaru. </p>
<a class="btn" href="/Polska/slask/promnice/opowiesc.html" title="Relacja">Opowieść</a>
<a class="btn" href="/Polska/polska-wskazowki.html#Slask" title="Wskazówki">Wskazówki</a>
<a class="btn" href="/Polska/slask/promnice/galeria.html" title="Galeria">Galeria</a>
</div>
</div>
</article>
<article class="col">
<div class="card carousel-style">
<div class="card-block p-0">
<h2 class="card-title">Polska - Schronisko na Kudłaczach</h3>
<img class="card-img-top opacity" data-toggle="collapse" data-target="#demo3" aria-expanded="false" aria-controls="collapseExample"src="/static/polska/beskidmakowski/pcim-kudlacze/cover.jpg" alt="Card image cap" title="Kliknij aby rozwinąć opis">
<p class="card-text collapse" id="demo3">Jeśli szukacie pomysłu na krótką popołudniową wycieczkę w okolicy Krakowa to polecamy pętle z Pcimia przez schronisko na Kudłaczach!</p>
<a class="btn" href="/Polska/BeskidMakowski/Pcim-Kudlacze/opowiesc.html" title="Relacja">Opowieść</a>
<a class="btn" href="/Polska/polska-wskazowki.html#BeskidMakowski" title="Wskazówki">Wskazówki</a>
<a class="btn" href="/Polska/BeskidMakowski/Pcim-Kudlacze/galeria.html" title="Galeria">Galeria</a>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
答案 0 :(得分：0)
感谢您加入该网站！让我很容易尝试一些东西。
我将添加以下CSS规则：
<file1>
def run_exp(config):
do work
return result
if __name__ == "__main__":
save_exp(run_exp(load_config(sys.args)))
<file2>
def monitor(queue):
active = set() # active process ids
while True:
msg = queue.get()
if msg == "sentinel":
<loop over active ids and kill them with os.killpg>
else:
<add or remove id from active set>
def worker(args):
id, queue = args
command = f"python <file1> {id}"
with subprocess.Popen(command, shell=True, ..., start_new_session=True) as process:
try:
queue.put(f"start {process.pid}")
process.communicate(timeout=timeout)
except TimeoutExpired:
os.killpg(process.pid, signal.SIGINT) # send signal to the process group
process.communicate()
finally:
queue.put(f"done {process.pid}")
def main():
<save configs => c_ids>
queue = manager.Queue()
process = Process(target=monitor, args=(queue,))
process.start()
def clean_exit():
queue.put("sentinel")
<terminate pool and monitor process>
r = pool.map_async(worker, [(c_id, queue) for c_id in c_ids])
atexit.register(clean_exit)
r.wait()
<terminate pool and monitor process>
如果您想要更多的解释，那么让我们看一下相关结构：
KeyboardInterrupt在您的网站上，header{
z-index:1;
}
article.col{
height:100vh;
}
.card.carousel-style{
width: calc(100% - 30px);
position: absolute;
bottom: 0px;
}
div的高度已扩展为适合其子级中最高的子级（<div class="carousel-item">
<article class="col">
<div class="card carousel-style"></div>
</div>
<article class="col">
<div class="card carousel-style"></div>
</div>
<article class="col">
<div class="card carousel-style"></div>
</div>
</div>
中的一个）。因此，当您单击.carousel-item并展开时，.card会变高。默认情况下，所有.card的位置都位于其父级的顶部，因此，当父级变高时，它们都会全部升高。
如果添加上面列出的CSS规则，则.carousel-item会变得与页面一样高，但是由于.card和.carousel-item。不幸的是，.card弄乱了某些水平居中的位置，因此我不得不添加position:absolute以便使每个bottom:0px居中于其position:absolute的中心。
编辑：
width: calc(100% - 30px)变得和页面一样高的另一个效果是它覆盖了导航栏。因此，我们需要使您的标题突出显示在.card的顶部，以便用户仍然可以单击它。因此，将article.col中的.carousel-item设置为大于0的任何值，它应该可以工作。