ブートストラップのリストボックスを使用して、ブートストラップ

を使用してリストボックスを水平線なしで表示するには、の水平線を外してリストボックスを表示しようとしています。ブートストラップのリストボックスを使用して、ブートストラップ

<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>

ただし、横線で表示しています。

JSFiddle

画面下のようになり、私が出てlines.Itでリストボックスを表示する方法を教えてください。ブートストラップCSS-ファイルから

出典

2016-11-09 Sri

私はbootswrap.cssファイルにコードを追加し –

を教えてくださいスタイルは影響を及ぼしていません。重量が分かるのは分かりません。 – CBroe

：

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

border: 1px solid #dddはあなたの境界線を作成します。独自のCSSファイル（または.html）を作成することで上書きすることができます。の後にをリンクしてください。ヘッダーにBootstrap CSSがあります。最初にリンクすると、ブートストラップのCSSがあなたの変更を上書きします。それ以外の場合は、変更内容に!importantを追加することもできます。あなたのCSSで

：ブートストラップ、CSS、HTML、JS、...非常によく文書化され、http://www.w3schools.com/で説明されている程度

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

すべて。あなたの質問にすべてお答えします。

出典

2016-11-10 09:24:09

フィドル更新この

.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; 
}

のようなものにブートストラップCSSを上書き

：JSFiddle

は（例：のcustom.css）任意のCSSファイルでこれらのスタイルを追加します。次に、custom.cssファイルをbootstrap.cssの下にリンクします。 Custom.cssスタイル定義はbootstrap.cssより優先されます。

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

出典

2016-11-10 09:24:58 Vikash

...そして、それらを上書きし、適用するブートストラップあなたが国境を好きではない場合、私たちは...今のところ、あなたの研究について – Sri

bootstrap.cssファイルがロードされた後で、CSSファイルをリンクする必要があります。このようにして、オーバーライドされます。更新された回答を見つけてください。 – Vikash

私はbootstrap.cssの後にcustom.cssファイルを読み込み、htmlファイルに2つのリンクを追加しました。しかし、スタイルは効果がありません。私に教えてください。 – Sri

これを試してください。ここでは、toggleClassを使用して境界線と境界線の両方を示しています。任意の要素をドラッグ＆ドロップすることができ、矢印全体のリストをクリックすると移動します。

$.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" >

出典

2016-11-10 11:37:59

コードスニペットを実行中にエラーが発生しています。確認してください。 – Sri

ブートストラップのリストボックスを使用して、ブートストラップ

答えて

関連する問題