堆栈内存溢出
  繁体   English   中英

引导程序中的故意重叠卡 - 文本被推到一边

[英]Intentional Overlapping Cards in Bootstrap - text is pushed off to the side

 原文  2017-07-18 18:22:51  6   2    jquery/ html/ css/ twitter-bootstrap-3

问题描述

我有一个设计，我使用Bootstrap编码，它有重叠卡。 我有布局工作（从jQuery的一点帮助）但顶部卡上的文本被推到底卡的一侧。

我很难过如何获得顶级卡片内容。 （即XXXs）在各自的顶级卡片中正确对齐。

这是今天看起来的截图。

图片

我希望它看起来像这样：

在此输入图像描述

这是代码： 

<!DOCTYPE html>
<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Overlap</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
  background-color: #81DFE8;
}

.background-card {
  background: #EFEFEF;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
  margin-top: 60px;
  padding: 0 30px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
  z-index:-1;        
}
.card {
  background: #EFEFEF;
  margin: 15px 30px;
  padding: 30px 75px 45px 50px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
}

#card-entity-header {
  padding: 30px 0;
}

.card-title {
  font-size: 32px;
}

.card-subtitle1 {
  font-size: 24px;
}
.card-subtitle1 small {
  font-size: 80%;
  font-style: italic;
  white-space: nowrap;
}
</style>


</head>
<body>


<div>
    <div class="container"> 

        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-7 background-card">
                    <div id="card-entity-header" "="">
                        <div class="card-title">Title</div>
                        <div class="card-subtitle1">Sub-Title</div>
                    </div>
                    <div id="page-cards-background">
                        <div>&nbsp;</div>
                    </div>
                </div>  
                <br><br>
                <div id="page-cards">
                    <div class="card">
                        xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                    </div>      
                    <div class="card">
                        xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                        888<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<script>

$("#page-cards").css("padding-top", 60 + parseInt($("#card-entity-header").height()));
$("#page-cards-background").height( parseInt($("#page-cards").height()) + 45);

</script>


</body></html>

2 个解决方案

解决方案1
 0  2017-07-18 18:55:10

我尝试过对HTML进行一些更改。 看看这个： https ： //jsfiddle.net/hLs7sppd/ 

 body { background-color: #81DFE8; } .background-card { background: #EFEFEF; background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); margin-top: 60px; padding: 0 30px; border-radius: 8px; box-shadow: 6px 6px 6px #404040; z-index: -1; } .card { background: #EFEFEF; margin: 15px 30px; padding: 30px 75px 45px 50px; border-radius: 8px; box-shadow: 6px 6px 6px #404040; } #card-entity-header { padding: 30px 0; } .card-title { font-size: 32px; } .card-subtitle1 { font-size: 24px; } .card-subtitle1 small { font-size: 80%; font-style: italic; white-space: nowrap; } 
 <div> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="col-sm-7 background-card"> <div id="card-entity-header"> <div class="card-title">Title</div> <div class="card-subtitle1">Sub-Title</div> </div> <div id="page-cards-background" style="z-index: 1; height: 687px;"> <div id="page-cards" style="z-index: 999;"> <div class="card"> xxx <br>xxx <br>xxx <br>xxx <br>xxx <br>xxx <br>xxx <br> </div> <div class="card"> xxx <br>xxx <br>xxx <br>xxx <br>xxx <br>xxx <br>xxx <br> 888 <br>xxx <br>xxx <br>xxx <br>xxx <br>xxx <br>xxx <br> </div> </div> </div> </div> <br> <br> </div> </div> </div> </div>

解决方案2
 0  2017-07-18 19:41:01

好的......我解决了这个问题。

我很确定我沿着这条路走下去但显然没有。 我只需要添加一个位置：绝对; 到.background-card css类。

我添加了一些标题，文本和一些引导字段等来证明它有点。

这是解决方案的屏幕截图：

在此输入图像描述

并且代码是： 

<!DOCTYPE html>
<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Overlap</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
  background-color: #81DFE8;
}

.background-card {
  background: #EFEFEF;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
  margin-top: 60px;
  padding: 0 30px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
  z-index:-1;  
  position:absolute;      
}
.card {
  background: #EFEFEF;
  margin: 15px 30px;
  padding: 30px 75px 45px 50px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
}

#card-entity-header {
  padding: 30px 0;
}

.card-title {
  font-size: 32px;
}

.card-subtitle1 {
  font-size: 24px;
}
.card-subtitle1 small {
  font-size: 80%;
  font-style: italic;
  white-space: nowrap;
}
</style>


</head>
<body>


<div>
    <div class="container"> 

        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-7 background-card">
                    <div id="card-entity-header" "="">
                        <div class="card-title">Title</div>
                        <div class="card-subtitle1">Sub-Title</div>
                    </div>
                    <div id="page-cards-background">
                        <div>&nbsp;</div>
                    </div>
                </div>  
                <br><br>
                <div id="page-cards">
                    <div class="card row">
                            <h3>Card Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper ullamcorper hendrerit. Cras ut ligula eu lorem finibus porta. Nunc lacinia, ex eu varius condimentum, ipsum enim aliquam magna, quis fringilla quam nunc nec erat.</p>
                            <div class="form-group">
                                <label class="col-sm-12">Label</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-12 required">Label </label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl2">
                                </div>
                            </div>
                    </div>      
                    <div class="card row">                              
                            <div class="form-group">
                                <label class="col-sm-12">Label</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-12 required">Label </label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl2">
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<script>

$("#page-cards").css("padding-top", 60 + parseInt($("#card-entity-header").height()));
$("#page-cards-background").height( parseInt($("#page-cards").height()) + 45);

</script>


</body></html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 执行搜索时引导卡重叠 侧面的Bootstrap Carosel文字 Bootstrap工具提示将右侧内容推开 视差的有意重叠固定文本 Bootstrap：将文本移动到复选框的一侧 同位素JS库-卡重叠 使用 Select2 和 Bootstrap 截断文本 引导程序：图像上的文字叠加层粘在左侧 用jQuery过滤Bootstrap 4卡 引导卡上的分页
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM