Question

结果：

我的代码：

<html lang="en">
  <head>
    <% include partials/template/head.ejs %>
    <% include partials/template/jsdefaults.ejs %>
  </head>
  <body class="<%= classname %>">
    <% include partials/template/header.ejs %>
    <% var prodPhotoString = "/images/products/" + product.mainImage %>
    <% if (Boolean(product.camp.mainImage)) { var campPhotoString = "/images/camps/" + product.camp.mainImage } else { var campPhotoString = "/images/defaults/camp.jpg"}%>
    <% var costPerHr = product.cost/product.contactHours %>
    <div class="container">
      <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-7">
          <h2><%= product.name %></h2>
          <div class='prodImage' style="float:right;">
            <img src="<%= prodPhotoString %>" class="img-thumbnail" width="300"/>
          </div>
          <h3>Price</h3>
          <h4><strong>Cost:</strong> €<%= product.cost %> per place</h4>
          <h4><strong>Activity Time:</strong> <%= product.contactHours %> hrs</h4>
          <h4><strong>Cost per Activty Hour:</strong> <%= costPerHr.toFixed(2) %> €/hr</h4>
          <h3>Dates</h3>
          <h4><strong>Begins:</strong> <%= moment(product.startDate).format('MMM Do YYYY hh:mm') %></h4>
          <h4><strong>Finishes:</strong> <%= moment(product.endDate).format('MMM Do YYYY hh:mm') %></h4>
          <h3>Location</h3>
          <h4>Toggle Map</h4>
          <div class="make-switch switch-on">
            <label class="sr-only" for="locSwitch">Map Toggle</label>
            <input id="locSwitch" class="bootSwitch" type="checkbox" name="locSwitch" data-off-text="hide" data-on-text="show"></input>
          </div>
          <div style="display:none" id="map" class="embed-responsive embed-responsive-16by9">Map should be here, something broke...</div>
          <h3>Places</h3>
          <h4><strong>Capacity:</strong> <%= product.places.max %> people</h4>
          <h4><strong>For:</strong> <%= product.ages.min %> - <%= product.ages.max %> years old</h4>
          <h4><strong>Capacity:</strong> <%= product.places.max %> people</h4>

          <p><%= product.description %></p>
        </div>
        <div class="col-sm-4">
          <a href="#"><h3><%= product.camp.name %></h3></a>
          <div class='campImage' style="float:right;">
            <img src="<%= campPhotoString %>" class="img-thumbnail" width="120"/>
          </div>
          <p>
            <strong>Camp Rating: </strong> <%= product.camp.stars %> stars<br>
            <strong>Address: </strong> <%= product.camp.location.address.line1 %>, <%= product.camp.location.address.line2 %>, <%= product.camp.location.address.county %> <br>
            <strong>Description: </strong> <%= product.camp.about %>
          </p>
        </div>
      </div> <!--row-->
    </div> <!--container-->
    <% include partials/template/footer.ejs %>
    <% var googurl = "https://maps.googleapis.com/maps/api/js?key=" + googapi.key %>
    <script type="text/javascript" src="<%= googurl %>"></script>
    <script>
      $(document).ready(function () {
        $(".bootSwitch").bootstrapSwitch();
        $('#locSwitch').on('switchChange.bootstrapSwitch',function (event, state){
          $('#map').toggle()
          initMap()
        })

        // MAP
        function initMap() {
          var myLatLng = {lat: Number(<%- JSON.stringify(product.meetLocation.loc[0]) %>), lng: Number(<%- JSON.stringify(product.meetLocation.loc[1]) %>)}
          map = new google.maps.Map(document.getElementById('map'), {
            center: myLatLng,
            zoom: 8
          });
          MeetMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: "My Meeting Point",
            dragable: false
          })
          <% if (Boolean(product.finishLocation.address.county)) { console.log(product.finishLocation.address.county) %>
            FinMarker = new google.maps.Marker({
              position: {lat: Number(<%- JSON.stringify(product.finishLocation.loc[0]) %>), lng: Number(<%- JSON.stringify(product.finishLocation.loc[1]) %>)},
              map: map,
              title: "My Meeting Point",
              dragable: false
            })
          <% } %>
        }
      })
    </script>
  </body>
</html>

Bootstrap开关功能完美，但我不知道它为何如此之久。我尝试更改属性data-size="small"，但它仍然不会更改开关的长度。我也尝试取出课程make-switch和switch-on，但长度没有变化。知道为什么会这样吗？

编辑：我可以设置以下开关<div>; <div class="make-switch switch-on" style="height:40px"> 但这是一个肮脏的解决方法。它看起来也不太好。

Bootstrap Switch极长

0 个答案: