小编Dan*_*ams的帖子

jQuery show()不会使Bootstrap d-none类可见

我99%肯定我在这里遗漏了非常明显的东西。在下一个示例中,单击按钮应使带有.progress类的div 可见。但是,它不起作用。

function func() {
  $('.progress').show();
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="progress d-none">
  No longer hidden!
</div>

<button onclick="func()">
  click me
</button>
Run Code Online (Sandbox Code Playgroud)

jquery twitter-bootstrap

6
推荐指数
1
解决办法
2265
查看次数

响应式CSS中无限制的最大宽度

任何人都可以告诉我,如果我可以为响应式网页设计设置"无限"最大宽度?

目前我有

@media screen and (max-width: 5000px) { }
Run Code Online (Sandbox Code Playgroud)

但是,如果有一天屏幕分辨率超过5000呢?

css

5
推荐指数
2
解决办法
1939
查看次数

在没有宽度的表格单元格内添加省略号

我想省略第二列中的文本,而不对两列中的任何一列硬编码宽度。在只有父元素(表格)具有固定宽度的情况下,这可能吗?

table {
  width: 100px;
  border: 1px solid green;
}

.td1 {
  border: 1px solid blue;
 }

.td2 {
  border: 1px solid red;
 }

.td div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
Run Code Online (Sandbox Code Playgroud)
<table>
  <tr>
    <td class="td1">Label:</td>
    <td class="td2"><div>thequickbrownfoxjumpsoverthelazydog</div></td>
  </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

html css html-table ellipsis

5
推荐指数
2
解决办法
1071
查看次数

显示第一个后隐藏具有相同类的元素

如果我有HTML:

<div class="myClass">1</div>
<div class="myClass">2</div>
<div class="myClass">3</div>
Run Code Online (Sandbox Code Playgroud)

我可以在我的CSS中写一条规则:

.myClass {
    /* only display the first instance of the class */
}
Run Code Online (Sandbox Code Playgroud)

css

5
推荐指数
2
解决办法
4500
查看次数

在 Bootstrap 下拉菜单打开后调用函数

我发现以下代码可以在 Bootstrap 下拉 onclick 事件上调用函数以打开菜单。我的问题是我需要在下拉 div 实际打开调用我的函数。(我正在测量内容的宽度,但在 HTML 出现在屏幕上之前这是无法完成的)。有人可以指导我如何做一些准备好的活动吗?

$('html').on('click.dropdown.data-api', function () {
    doSomething();
});
Run Code Online (Sandbox Code Playgroud)

jquery twitter-bootstrap

4
推荐指数
1
解决办法
1342
查看次数

单击时删除元素周围出现的蓝色边框

我在Mac OS上使用Firefox.当我CMND +点击表格中的文字时,TD周围会出现蓝色边框.我能告诉CSS在点击/焦点上不显示此边框吗?

<table>
  <tr>
    <td>Hello World!</td>
  </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

html css

4
推荐指数
2
解决办法
4695
查看次数

设置Bootstrap模式内容以在高度超过浏览器时滚动

我见过很多人问这个问题,但没有真正可靠的答案。

如果模态的高度超过了浏览器的内部高度,我希望红色边框的Div具有滚动条,以将模态保持在浏览器视图中。

#scrollbox {
  border: 1px solid red;
  }
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<input type="button" data-toggle="modal" data-target="#myModal" value="Launch Modal">

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        Hello, below is some text in a div that should start scrolling if the height of the modal exceeds the browser.
        
        <p><div id="scrollbox">
          the<br>quick<br>brown<br>fox<br>
          the<br>quick<br>brown<br>fox<br>
          the<br>quick<br>brown<br>fox<br>
          the<br>quick<br>brown<br>fox<br>
          the<br>quick<br>brown<br>fox<br>
          the<br>quick<br>brown<br>fox<br>
          the<br>quick<br>brown<br>fox<br>
          the<br>quick<br>brown<br>fox<br>
          the<br>quick<br>brown<br>fox<br>
          the<br>quick<br>brown<br>fox<br>
        </div>
        
      </div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap

3
推荐指数
1
解决办法
3593
查看次数

除了一个元素之外,如何使页面"熄灭"

我不是真的在寻求我的代码帮助,我更想问,你是怎么做到的?

当你点击我的div时,屏幕会变黑,但是我希望我的div下面仍然显示为正常,但是剩下的区域会变黑.

function lightsout() {
  document.getElementById("lightsout").style.visibility = "visible";
}
Run Code Online (Sandbox Code Playgroud)
<div style="width:100px;height:100px;border:2px solid blue" onclick="lightsout()">Click Me</div>

<div id="lightsout" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:black;visibility:hidden;">
Run Code Online (Sandbox Code Playgroud)

html javascript css position

3
推荐指数
1
解决办法
87
查看次数

获取LI元素的offsetWidth(或等效值)

所以我正在尝试使用jQuery获取元素的宽度。

alert($("#theList li:eq(0)").offsetWidth);
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol id="theList">
  <li>The quick brown fox
</ol>
Run Code Online (Sandbox Code Playgroud)

javascript jquery

2
推荐指数
2
解决办法
5855
查看次数

选择最后一个孩子,除非它也是第一个孩子

我为UL的最后一个LI标签设置了一条规则:

.className li:last-child {
  stuff: here;
}
Run Code Online (Sandbox Code Playgroud)

我能够设置一个规则,说:“应用此样式到最后LI标签,除非在CSS的last-child也是first-child”,也就是说,在OL唯一一个LI标签。

css css-selectors

2
推荐指数
1
解决办法
754
查看次数