小编Ana*_*nda的帖子

具有100%高度和边距底部的自举卡

我正在尝试开发一个具有以下要求的Bootstrap 4卡网格:

  • 所有卡都必须位于一个div中class="row",因为我不知道总数会有多少卡,我希望行在不同的屏幕断点处看起来很好.
  • 此行中的列在不同的断点处的大小不同(例如,col-sm-6 col-lg-4).
  • 在任何单独的"显示行"中,例如,在任何给定时间在屏幕上显示的一行卡片,每张卡片应具有相同的高度.
  • 每张卡的底部应有一个边距,以便与所有其他卡分开.

我已经设法得到了几乎所有的方式,但我遇到了一个问题:设置class="h-100"我的卡以确保它们都是相同的高度杀死每张卡底部的边距.

有没有办法确保任何给定显示行中的所有卡都是相同的高度,同时保留其底部的边距?

HTML代码:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#ff0000;">
        Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#00ff00;">
        Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#0000ff;">
        Test card content. Test card content. Test card content. Test card content. Test card content. Test card …
Run Code Online (Sandbox Code Playgroud)

css height margin bootstrap-4 bootstrap-grid

15
推荐指数
1
解决办法
9537
查看次数

可能使用按钮从Textarea粘贴到另一个textarea输入?| jQuery的

如何使粘贴按钮工作?

我的My Text有1个元素textarea.

<textarea id="myText">Ananda</textarea>
Run Code Online (Sandbox Code Playgroud)

我想将其粘贴到另一个输入文本中.

<input type="text" id="resultPaste">
Run Code Online (Sandbox Code Playgroud)

我有从按钮#myText到的按钮#resultPaste.

<span class="btn-main btn-paste">PASTE</span>
Run Code Online (Sandbox Code Playgroud)

我的代码 jQuery:

$(document).ready(function() {
 $(".btn-paste").click(function() {
        var text = $('#myText').val()
    $('#resultPaste').append(text);
 });
});
Run Code Online (Sandbox Code Playgroud)

代码片段演示:

$(".btn-paste").click(function() {
		var text = $('#myText').val();
    $('#resultPaste').append(text);
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<textarea id="myText">Ananda</textarea>
<br>
<button class="btn-primary btn-paste">PASTE</button>
<br><br>
<input type="text" id="resultPaste">
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

html javascript jquery

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

选择Checkbox!==选择行表

select/unselect按钮适用于复选框.

但它不适用于行表.

//Select row table
$('#example').on('click', 'tr', function() {
  var $row = $(this),
    isSelected = $row.hasClass('selected')
  $row.toggleClass('selected')
    .find(':checkbox').prop('checked', !isSelected);
});

// Problem : Checkbox !== select row
$("#selectAll, #unselectAll").on("click", function() {
  var selectAll = this.id === 'selectAll';
  $("#example tr :checkbox").prop('checked', selectAll);
});
Run Code Online (Sandbox Code Playgroud)

我认为清单只是用于显示,选择行并标记它.

单击选择/取消选择按钮时的方式,

它也选择在行表上,而不仅仅是在复选框上?

您可以查看是否单击了行表.

代码片段演示:

$('#example').dataTable();

//Select row table
$('#example').on('click', 'tr', function() {
  var $row = $(this),
    isSelected = $row.hasClass('selected')
  $row.toggleClass('selected')
    .find(':checkbox').prop('checked', !isSelected);
});

// Problem : Checkbox !== select row
$("#selectAll, #unselectAll").on("click", function() …
Run Code Online (Sandbox Code Playgroud)

javascript checkbox jquery

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