堆棧內存溢出
  簡體   English   中英

引導程序中的故意重疊卡 - 文本被推到一邊

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

 原文  2017-07-18 18:22:51  8   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