나는 아주 간단하지 같은 페이지 내가 입력할 수 있는 회원과 제거하거나 완료로 표시합니다. 회원은 스트랩 경고,그래서 지금까지 너무 좋아요.
나의 문제는 경고/회원들은 너무 광범위하고 있어야에서 두 개 또는 세 개의 열을 볼 수 있도록 더 많은 그들의습니다.
이것은 내가 붙어 있기 때문에,그리드 시스템은 원하지 않습니다. I don't know what I 편하게 사용하실 수 있습니다!
누군가가 나를 도와 주시겠습니,어떻게 다시 정렬 구성원 목록으로 두 개 또는 세 개의 열?
내가 함께 노력 열과 team1 단추입니다.
이 JSFiddle URL 한다: https://jsfiddle.net/voriand/zsfo65wb/
$(document).ready(function() {
$('.btn-addmember').click(function() {
if ($('#text').val().length != 0) {
var x = $('#memberlist').html();
var y =
`<div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
` + $('#text').val() + `</div>`;
$('#memberlist').html(y + x);
$('#text').val("");
} else alert("Please, enter the name of the member");
});
//Adding members of team1
$('.btn-team1').click(function() {
if ($('#team1').val().length != 0) {
var members = $('#team1').val().split('\n');
for (var i = 0; i < members.length; i++) {
var x = $('#memberlist').html();
var y =
`<div class="col-sm"><div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<b>` + members[i] + `</b></div></div>`;
if (members[i].trim().length > 0) {
$('#memberlist').html(y + x);
}
}
}
});
//Adding members of team2
$('.btn-team2').click(function() {
if ($('#team2').val().length != 0) {
var members = $('#team2').val().split('\n');
for (var i = 0; i < members.length; i++) {
var x = $('.container').html();
var y =
`<div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<b>` + members[i] + `</b></div>`;
if (members[i].trim().length > 0) {
$('.container').html(y + x);
}
}
}
});
// When Member is clicked
$(document).on('click', '.alert', function() {
if ($(this).css('text-decoration-line') == "none") {
$(this).css('text-decoration-line', 'line-through');
$(this).css('background-color', '#dddddd');
$(this).css('border-color', '#dddddd');
} else {
$(this).css('text-decoration-line', 'none');
$(this).css('background-color', '#dff0d8');
$(this).css('border-color', '#d6e9c6');
}
});
});.container {
width: 80%;
height: auto;
}
.foot {
position: fixed;
left: 10%;
bottom: 0;
width: 80%;
text-align: center;
}
.form-group {
height: 0px;
visibility: hidden;
}
.copyright {
width: 100%;
text-align: right;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<center>
<div class="foot">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-10">
<!-- Input for members -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Add member" id="text">
<div class="input-group-btn">
<button class="btn btn-success btn-addmember">
<i class="glyphicon glyphicon-plus">
</i></button>
</div>
<div class="input-group-btn">
<button class="btn btn-success btn-team1">
<i class="glyphicon glyphicon-plus">
</i> TEAM1</button>
</div>
<div class="input-group-btn">
<button class="btn btn-success btn-team2">
<i class="glyphicon glyphicon-plus">
</i> TEAM2</button>
</div>
</div>
<br>
<br>
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Team1</label>
<textarea class="form-control" id="team1" rows="3">
vivamus eget
lacus vitae
mi vulputate
varius integer
suscipit orci
condimentum
vestibulum
</textarea>
<label for="exampleFormControlTextarea1">Team2</label>
<textarea class="form-control" id="team2" rows="3">
vivamus eget
lacus vitae
mi vulputate
varius integer
suscipit orci
condimentum
vestibulum
</textarea>
</div>
<p class="copyright">Created by: Me - <a href="mailto:[email protected]">[email protected]</a></p>
</div>
<br>
<h2 class="text text-success">Team Members</h2>
<br>
<div class="container-fluid">
<div id="memberlist" class="row">
</div>
</div>
</center>