Wie die Listbox ohne horizontale Linien mit Bootstrap

angezeigt wird versucht, die Listbox mit horizontalen Linien innerhalb dieser anzuzeigen, mithilfe von Bootswrap Listbox.Wie die Listbox ohne horizontale Linien mit Bootstrap

<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head> 

<body> 
<div class="container"> 

    <ul class="list-group"> 
    <li class="list-group-item">First item</li> 
    <li class="list-group-item">Second item</li> 
    <li class="list-group-item">Third item</li> 
    </ul> 
</div> 

</body>

Aber es wird mit horizontalen Linien angezeigt.

JSFiddle

Bitte lassen Sie mich wissen, wie das Listenfeld angezeigt werden mit aus lines.It wie unten Bildschirm sein würde.

Quelle

2016-11-09 Sri

Bitte teilen Sie uns Ihre Forschungen wissen so weit ... –

Wenn Sie mögen es nicht, die Grenzen Bootstrap gilt, sie dann überschreiben ... – CBroe

Von der Bootstrap CSS-Datei:

list-group-item { 
    position: relative; 
    display: block; 
    padding: 10px 15px; 
    margin-bottom: -1px; 
    background-color: #fff; 
    border: 1px solid #ddd; 
    }

Die border: 1px solid #ddd schafft Ihre Grenze. Sie können dies überschreiben, indem Sie Ihre eigene CSS-Datei erstellen (oder in Ihrer .html). Verknüpfen Sie es nach der Bootstrap CSS in Ihrem Header! Wenn Sie es zuerst verknüpfen, überschreibt das Bootstrap css Ihre Änderungen. Andernfalls könnten Sie auch !important zu Ihren Änderungen hinzufügen.

in Ihrem CSS:

list-group-item { 
    border: 0px; 
    }

Alles über Bootstrap, CSS, HTML, JS, ... ist sehr gut dokumentiert und erklärt bei http://www.w3schools.com/. Es wird wahrscheinlich alle Ihre Fragen beantworten!

Quelle

2016-11-10 09:24:09

die Bootstrap CSS etwas außer Kraft setzen, wie dieser

.list-group-item:first-child { 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
    border-top: 1px solid #ddd; 
} 

.list-group-item { 
    position: relative; 
    display: block; 
    padding: 10px 15px; 
    margin-bottom: -1px; 
    background-color: #fff; 
    border-left: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
} 

.list-group-item:last-child { 
    margin-bottom: 0; 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px; 
    border-bottom: 1px solid #ddd; 
}

Aktualisiert Fiddle: JSFiddle

diese Stile in jeder CSS-Datei hinzufügen (zum Beispiel: custom.css). Verknüpfen Sie dann Ihre custom.css-Datei unter der bootstrap.css. Custom.css-Stildefinitionen überschreiben bootstrap.css.

Quelle

2016-11-10 09:24:58 Vikash

i hinzugefügt, um den Code in bootswrap.css Datei , aber Stile wirken nicht. Wissen Sie nicht wt passieren – Sri

Sie müssen die CSS-Datei verknüpfen, nachdem die Datei bootstrap.css geladen wird. Auf diese Weise wird es überschrieben. Bitte finden Sie die aktualisierte Antwort. – Vikash

Ich habe die Datei custom.css nach der bootstrap.css geladen und 2 Links in meine HTML-Datei hinzugefügt. Aber Stile wirken nicht. Bitte lassen Sie es mich wissen. – Sri

Versuchen Sie dies, hier habe ich sowohl mit Rand und ohne Grenze mit toggleClass demonstriert. Sie können jedes Element ziehen und ablegen und beim Klicken auf den Pfeil wird die gesamte Liste verschoben.

$.fn.changeTag = function(tag){ 
 
        // create the new, empty shim 
 
        var replacement = $('<' + tag + '>'); 
 
        // empty container to hold attributes 
 
        var attributes = {}; 
 
        // copy all the attributes to the shell 
 
        $.each(this.get(0).attributes, function(index, attribute) { 
 
         attributes[attribute.name] = attribute.value; 
 
        }); 
 
        // assign attributes to replacement 
 
        replacement.attr(attributes); 
 
        // copy the data 
 
        replacement.data(this.data()); 
 
        // get all the kids, with data and events 
 
        var contents = this.children().clone(true); 
 
        // inseminate 
 
        replacement.append(contents); 
 
        // swap it out 
 
        this.replaceWith(replacement); 
 
       } 
 
    
 
       var $chooser = $("#fieldChooser").fieldChooser(); 
 
       var $sourceFields = $("#sourceFields").children(); 
 
       $chooser.getSourceList().add($sourceFields); 
 
       
 
       
 
       
 
       document.getElementById("toggleBorder").onclick=function(){ 
 
       $('.list-group-item').toggleClass('noboder'); 
 
       }; 
 
       $('.list-group-item').toggleClass('noboder'); 
 
       $("#fieldChooser").append("<td id=\"source\"></td>"); 
 
    $("#fieldChooser").append($("#mover")); 
 
    $('#mover').changeTag('td'); 
 
    $("#fieldChooser").append("<td id=\"destination\"></td>"); 
 

 
$("#source").append($(".fc-source-fields")); 
 
$("#destination").append($(".fc-destination-fields")); 
 
       document.getElementById("moveleft").onclick=function(){ 
 
       $(".fc-source-fields").append($(".fc-destination-fields .list-group-item")); 
 
       }; 
 
       document.getElementById("moveright").onclick=function(){ 
 
       $(".fc-destination-fields").append($(".fc-source-fields .list-group-item")); 
 
       }; 
 
       $('fieldChooser div.fc-field-list').addClass("list-group");

.noboder, .noboder:hover{ 
 
    margin: 0px; 
 
    border-width: 0px !important; 
 
    box-shadow:unset !important; 
 
    outline:unset !important; 
 
    } 
 
    .list-group-item { 
 
    white-space: nowrap; 
 
     padding:5px !important; 
 
    } 
 
    #moveleft,#moveright,.list-group-item { 
 
    cursor:hand; 
 
    cursor:pointer; 
 
    } 
 
    table{ 
 
    margin:auto; 
 
    } 
 
    td.list-group{ 
 
    border:1px solid #777; 
 
    padding:1px; 
 
    margin:0px !important; 
 
    
 
    } 
 
th { 
 
    text-align:center !important; 
 
    } 
 
#mover{ 
 
    padding:0px !important; 
 
    margin:0px !important; 
 
} 
 
.fc-field-list{ 
 
    height:300px !important; 
 
    overflow:auto !important; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet"/> 
 
<link href="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Drag-Drop-Multi-Select-List-Box-fieldChooser/demo/stylesheets/style.css" rel="stylesheet"/> 
 
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet"/> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Drag-Drop-Multi-Select-List-Box-fieldChooser/fieldChooser.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul id="sourceFields" class="list-group"> 
 
<li class="list-group-item">First name</li> 
 
<li class="list-group-item">Last name</li> 
 
<li class="list-group-item">Home</li> 
 
<li class="list-group-item">Work</li> 
 
<li class="list-group-item">Direct</li> 
 
<li class="list-group-item">Cell</li> 
 
<li class="list-group-item">Fax</li> 
 
<li class="list-group-item">Work email</li> 
 
<li class="list-group-item">Personal email</li> 
 
<li class="list-group-item">Website</li> 
 
</ul> 
 
<div id="mover" style="width: 50px;text-align: center;color:#1D65B1;"> 
 
    <span id="moveleft" class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true" title="Move all left"></span> 
 
    <span id="moveright" class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true" title="Move all right"></span> 
 
      
 
</div> 
 

 
<table> 
 
      <tr> 
 
      <th>Store List</th> 
 
      <th></th> 
 
      <th>Store Selection</th> 
 
      </tr> 
 
<tr id="fieldChooser" class="list-group" tabIndex="1"></tr> 
 
</table> 
 

 
<input type="button" id="toggleBorder" value="Toggle Border" >

Quelle

2016-11-10 11:37:59

Beim Ausführen des Code-Snippets treten Fehler auf. Können Sie dies bitte überprüfen? – Sri

Wie die Listbox ohne horizontale Linien mit Bootstrap

Antwort

Verwandte Themen