Question

我正在尝试使用在我自己的网页中找到here的聊天气泡，除了以下代码之外，我无法在我的网页上使用任何类型的CSS：

form .error {
  color: #ff0000;
}
.bubble {
    position: relative;
    background: #FFFFCC;
    border: 1px solid #FFCC00;
    max-width:250px;
    padding:10px;
    font-family:arial;
    margin:0 auto;
    font-size:14px;
    border-radius:6px;
}
.bubble:after,
.bubble:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.bubble:after {
    border-color: rgba(255, 255, 204, 0);
    border-right-color: #FFFFCC;
    border-width: 15px;
    margin-top: -15px;
}
.bubble:before {
    border-color: rgba(255, 204, 0, 0);
    border-right-color: #FFCC00;
    border-width: 16px;
    margin-top: -16px;
}

我正在尝试设置div元素的样式并尝试过上面引用的Pure CSS Speech Bubble文件中的许多类，但由于某种原因，我想要的唯一类是bubble类。其他所有内容都只显示为纯文本。我已多次刷新页面。下面是我尝试将div设计为聊天气泡的地方。目前我正在尝试使用提供的链接中的直角三角形变体。

<div class="panel-body">
            <div class="container" id='chatbox'>


                <div class = "triangle-right" th:each="message:${messages}">
                        <p th:text="${message.contents}"></p>
                        <p class="text-muted" th:text="'-' + ${message.sender}"></p>
                </div>



            </div>
            <div class="panel-footer">
                 <div class="input-group">
                 <form th:action="@{/sendmessage}" th:object="${message}" name="messageform" >
                  <textarea class="form-control" id="messageInput" rows="3" th:field="*{contents}" name="chatmessage"></textarea>

                  <!--<span class="input-group-btn">-->
                    <button class="btn btn-primary" onclick='encrypt(' document.getElementById('messageInput').value + ','+ key +');'>Send</button>
                 <!-- </span>-->
                  </form>
                </div>
            </div>
          </div>

我的推荐信：

<!-- Jquery base for validation and bootstrap -->
<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<!-- Jquery validation plugin -->
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<!-- Jquery validation rules for this page -->
<script src="../javascript/validation.js"></script>
<!-- Bootstrap css and required javascript files -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Style to make the warnings red and chat bubbles -->
<link rel="stylesheet" href="../css/styles.css"/>

如上所述，泡泡类完美地运行，但除了普通（和静音）文本之外没有其他任何东西显示。任何帮助表示赞赏。

我使用Bootstrap版本3.2.0作为附加信息，但是我在此文件中包含我的Bootstrap引用下的样式。

CSS类不在我的HTML中显示

0 个答案: