Как отобразить список без горизонтальных линий с помощью Bootstrap

я пытаюсь отобразить список с горизонтальными линиями внутри этого
с помощью списка bootswrap.

<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

Пожалуйста, дайте мне знать, как отобразить список со строками out.Это было бы как под экраном.

Введите описание изображения здесь

3 ответа

  1. Из загрузочного css-файла:

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

    The border: 1px solid #dddcreates your border. Вы можете перезаписать это, создав свой собственный файл css (или в вашем .формат HTML.) Свяжите его после css Bootstrap в вашем заголовке! Если вы свяжете его сначала, CSS-загрузчик перезапишет ваши изменения. В противном случае вы также можете добавить !importantизменения.

    В вашем css:

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

    Все о Bootstrap, css, html, js,… очень хорошо документировано и объяснено на http://www.w3schools.com/ . Он, скорее всего, ответит на все ваши вопросы!

  2. Переопределите css bootstrap к чему-то вроде этого

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

    Обновлено Fiddle : JSFiddle

    Добавьте эти стили в любой файл css (например: custom.стиль CSS.) Затем свяжите свои пользовательские.css-файл под загрузкой.стиль CSS. Традиция.определения стиля 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">
    
  3. Попробуйте это, здесь я продемонстрировал как с границей и без границы с помощью 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" >