Question

我的页面上有一些模态。它们都工作正常，除了其中一个，它们只显示在sm，md和lg设备上，但不显示在xs上。当我缩小屏幕时，我看到的只是一个黑暗的屏幕，但没有模态。如果我点击按钮触发它，当我在xs屏幕上时，同样的黑暗屏幕。那可能是什么？

<a href="mailto:?subject={$title}&body={$item_url}" class="btn btn-social-icon btn-reddit btn-xs" data-toggle="modal" data-target="#shareemail"><i class="fa fa-envelope-o"></i></a>

模态本身：

<div id="shareemail" class="modal fade" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content"><form class="form-horizontal">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <div class="h-3 modal-title">Email a friend about this watch</div>
                  <p class="move-down">Share this watch with a friend via email. Please fill out the information below and your email will be sent.</p>
                </div>
                <div class="modal-body">

          <div class="form-group">
            <label for="Yourname" class="col-sm-3 control-label">Your name</label>
            <div class="col-sm-4">
              <input type="text" class="form-control" id="yourname" placeholder="Your name">
            </div>
          </div>
           <div class="form-group">
            <label for="Youremail" class="col-sm-3 control-label">Your email</label>
            <div class="col-sm-4">
              <input type="email" class="form-control" id="youremail" placeholder="Your email">
            </div>
          </div>
          <div class="form-group">
            <label for="Friendsname" class="col-sm-3 control-label">Friend's name</label>
            <div class="col-sm-4">
              <input type="text" class="form-control" id="friendsname" placeholder="Friend's name">
            </div>
          </div>
           <div class="form-group">
            <label for="freindsemail" class="col-sm-3 control-label">Friend's email</label>
            <div class="col-sm-4">
              <input type="email" class="form-control" id="friendsemail" placeholder="Friend's email">
            </div>
          </div>
           <div class="form-group">
            <label for="subject" class="col-sm-3 control-label">Subject</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="subject" value="A watch was shared with you...">
            </div>
          </div>
          <div class="form-group">
            <label for="message" class="col-sm-3 control-label">Message</label>
            <div class="col-sm-8">
              <textarea class="form-control" rows="3" placeholder="Type your message here"></textarea>
            </div>
          </div>

           <div class="row">
             <div class="col-xs-3 vcenter"> <img src="img/watch1.jpg" alt="" class="img-responsive cart-thumbnail"/></div><div class="col-xs-8 vcenter"><strong>Glashutte Original</strong> Pavonina Quartz Ladies' Watch<br>
      <span class="hidden-xs">Model Number:</span> 1-03-01-15-02-04 </div>
           </div>



           <div class="form-group">
            <div class="col-sm-offset-3 col-sm-8">
              <div class="checkbox">
                <img src="http://placehold.it/300x57">
              </div>
            </div>
          </div>

        </div>
                <div class="modal-footer">

        <div class="checkbox-inline">
                <label>
                  <input type="checkbox"> Send me a copy
                </label></div>&nbsp;&nbsp;

                <button type="button" class="btn btn-custom">Send email</button>
                </div></form>
              </div>
            </div>
          </div>

Answer 1

如果这是原因，则不是100％确定，但我注意到您的模态内容中的列是：

col-sm-#代替col-xs-#

也许内容对于模态而言太大而且不允许它正确呈现？

Answer 2

尝试以下HTML代码;

<div id="shareemail" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<form class="form-horizontal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="h-3 modal-title">Email a friend about this watch</div>
        <p class="move-down">Share this watch with a friend via email. Please fill out the information below and your email will be sent.</p>
    </div>

    <div class="modal-body">
    <div class="row">
        <div class="col-sm-4">
        <div class="form-group">
            <label for="Yourname" class="col-sm-3 control-label">Your name</label>
            <input type="text" class="form-control" id="yourname" placeholder="Your name">
        </div>
        </div>
        <div class="col-sm-4">
        <div class="form-group">
            <label for="Youremail" class="col-sm-3 control-label">Your email</label>
            <input type="email" class="form-control" id="youremail" placeholder="Your email">
        </div>
        </div>
        <div class="col-sm-4">
        <div class="form-group">
            <label for="Friendsname" class="col-sm-3 control-label">Friend's name</label>
            <input type="text" class="form-control" id="friendsname" placeholder="Friend's name">
        </div>
        </div>
        <div class="col-sm-4">
        <div class="form-group">
            <label for="freindsemail" class="col-sm-3 control-label">Friend's email</label>
            <input type="email" class="form-control" id="friendsemail" placeholder="Friend's email">
        </div>
        </div>
        <div class="col-sm-8">
        <div class="form-group">
            <label for="subject" class="col-sm-3 control-label">Subject</label>
            <input type="text" class="form-control" id="subject" value="A watch was shared with you...">
        </div>
        </div>

        <div class="col-sm-8">
        <div class="form-group">
            <label for="message" class="col-sm-3 control-label">Message</label>
            <textarea class="form-control" rows="3" placeholder="Type your message here"></textarea>
        </div>
        </div>

        <div class="col-xs-3 vcenter">
            <img src="img/watch1.jpg" alt="" class="img-responsive cart-thumbnail"/>
        </div>
        <div class="col-xs-8 vcenter">
            <strong>Glashutte Original</strong> Pavonina Quartz Ladies' Watch<br>
            <span class="hidden-xs">Model Number:</span> 1-03-01-15-02-04 </div>
        </div>

        <div class="col-sm-offset-3 col-sm-8">
        <div class="form-group">
        <div class="checkbox">
            <img src="http://placehold.it/300x57">
        </div>
        </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <div class="checkbox-inline">
    <label><input type="checkbox"> Send me a copy</label></div>&nbsp;&nbsp;
    <button type="button" class="btn btn-custom">Send email</button>
</div>
</form>
</div>
</div>
</div>  <div id="shareemail" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<form class="form-horizontal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="h-3 modal-title">Email a friend about this watch</div>
        <p class="move-down">Share this watch with a friend via email. Please fill out the information below and your email will be sent.</p>
    </div>

    <div class="modal-body">
    <div class="row">
        <div class="col-sm-4">
        <div class="form-group">
            <label for="Yourname" class="col-sm-3 control-label">Your name</label>
            <input type="text" class="form-control" id="yourname" placeholder="Your name">
        </div>
        </div>
        <div class="col-sm-4">
        <div class="form-group">
            <label for="Youremail" class="col-sm-3 control-label">Your email</label>
            <input type="email" class="form-control" id="youremail" placeholder="Your email">
        </div>
        </div>
        <div class="col-sm-4">
        <div class="form-group">
            <label for="Friendsname" class="col-sm-3 control-label">Friend's name</label>
            <input type="text" class="form-control" id="friendsname" placeholder="Friend's name">
        </div>
        </div>
        <div class="col-sm-4">
        <div class="form-group">
            <label for="freindsemail" class="col-sm-3 control-label">Friend's email</label>
            <input type="email" class="form-control" id="friendsemail" placeholder="Friend's email">
        </div>
        </div>
        <div class="col-sm-8">
        <div class="form-group">
            <label for="subject" class="col-sm-3 control-label">Subject</label>
            <input type="text" class="form-control" id="subject" value="A watch was shared with you...">
        </div>
        </div>

        <div class="col-sm-8">
        <div class="form-group">
            <label for="message" class="col-sm-3 control-label">Message</label>
            <textarea class="form-control" rows="3" placeholder="Type your message here"></textarea>
        </div>
        </div>

        <div class="col-xs-3 vcenter">
            <img src="img/watch1.jpg" alt="" class="img-responsive cart-thumbnail"/>
        </div>
        <div class="col-xs-8 vcenter">
            <strong>Glashutte Original</strong> Pavonina Quartz Ladies' Watch<br>
            <span class="hidden-xs">Model Number:</span> 1-03-01-15-02-04 </div>
        </div>

        <div class="col-sm-offset-3 col-sm-8">
        <div class="form-group">
        <div class="checkbox">
            <img src="http://placehold.it/300x57">
        </div>
        </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <div class="checkbox-inline">
    <label><input type="checkbox"> Send me a copy</label></div>&nbsp;&nbsp;
    <button type="button" class="btn btn-custom">Send email</button>
</div>
</form>
</div>
</div>
</div>

Bootstrap模式未在xs设备上显示

2 个答案: