Mám veľmi jednoduchý-sa mi páči stránka, kde by som mohol vstúpiť členov a odstrániť ich alebo ich označiť ako splnenú. Členovia sú Bootstrap upozornenia, zatiaľ je všetko dobré.
Môj problém je, že záznam/členovia sú príliš široký a mal by byť v dvoch alebo troch stĺpcov, aby ste si mohli pozrieť viac z nich na obrazovke.
To je, kde som si zasekol, pretože sústavy nechce to. Neviem, čo mám chýba...
Môže niekto prosím, pomôžte mi, ako na usporiadanie zoznamu členov do dvoch alebo troch stĺpcov?
Snažil som sa s stĺpce s team1 tlačidlo.
Toto je JSFiddle URL na to: 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>