html - 让 bootstrap col 工作

Question

我有一组链接，我想将它们均匀地隔开，它们也应该是移动响应的。我似乎不能让他们去公司。

与之关联的代码:

ul#menu {
  padding: 0;
}
ul#menu li {
  display: inline;
}
ul#menu li a {
  color: #00619b;
  padding: 10px 20px;
  text-decoration: none;
}
ul#menu li a:hover {
  background-color: orange;
}
span.voiceIconTitles {
  font-weight: bold;
  font-size: 15px;
}

<ul id="menu">
  <div class="row">
    <li>
      <a href="#" data-toggle="modal" data-target="#VoicemailModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-14.png"><span class="voiceIconTitles">Voicemail</span>
      </a>
      <div id="VoicemailModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Voicemail</h4>
            </div>
            <div class="modal-body">
              <p>It's your own personal answering service. Now callers can leave messages for you when your line is busy, when you're way from home, or when you just can't make it to the phone. Whenever you hear a stutter dial tone on your home phone line,
                it means you have a new message.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#ForwardinglModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-1.png"><span class="voiceIconTitles">All Call Forwarding</span>
      </a>
      <div id="ForwardinglModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">All Call Forwarding</h4>
            </div>
            <div class="modal-body">
              <p>Forward incoming calls to another number when you're away from home so that you won't miss important calls.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#VIPModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-2.png"><span class="voiceIconTitles">VIP Ringing</span>
      </a>
      <div id="VIPModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">VIP Ringing</h4>
            </div>
            <div class="modal-body">
              <p>A distinctive ring identifies calls from numbers that you select.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#RepeatDialingModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-4.png"><span class="voiceIconTitles">Repeat Dialing*</span>
      </a>
      <div id="RepeatDialingModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Repeat Dialing</h4>
            </div>
            <div class="modal-body">
              <p>Repeat Dialing allows you to automatically redial a busy number for you and then notifies you when the number is no longer busy so you can get through.
                <br />* This service is a pay per use service only. You will incur a charge of 90 cents each time you use it for a maximum charge of $9.00 per month for Repeat Dialing usage. Voice Online Manager Scroll to Explore International Calling International
                Call</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#CallWaitingModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-5.png"><span class="voiceIconTitles">Call Waiting</span>
      </a>
      <div id="CallWaitingModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Call Waiting</h4>
            </div>
            <div class="modal-body">
              <p>Don't miss an important call just because you're on the phone. With Call Waiting from Charter Spectrum Voice, a soft beep will let you know another person is calling you.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#SelectiveCallModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-6.png"><span class="voiceIconTitles">Selective Call Forwarding</span>
      </a>
      <div id="SelectiveCallModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Selective Call Forwarding</h4>
            </div>
            <div class="modal-body">
              <p>Forward incoming calls coming from only a select group of phone numbers.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
  </div>
  <div class="row">
    <li>
      <a href="#" data-toggle="modal" data-target="#SpeedDialModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-7.png"><span class="voiceIconTitles">Speed Dial</span>
      </a>
      <div id="SpeedDialModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Speed Dial</h4>
            </div>
            <div class="modal-body">
              <p>No need to memorize phone numbers when you can program up to 8 numbers for fast, one-digit dialing.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#VoiceOnlineModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-15.png"><span class="voiceIconTitles">Voice Online Manager</span>
      </a>
      <div id="VoiceOnlineModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Voice Online Manager</h4>
            </div>
            <div class="modal-body">
              <p>Manage your home phone from anywhere, at home or on the go with Voice Online Manager, available at no extra cost for customers with Charter Spectrum Voice.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#CallerIDModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-8.png"><span class="voiceIconTitles">Caller ID</span>
      </a>
      <div id="CallerIDModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Caller ID</h4>
            </div>
            <div class="modal-body">
              <p>With Caller ID from Charter Spectrum Voice, any incoming caller's phone number and name, if available, are displayed on a caller ID unit before you answer the call.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#BlockAnonModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-9.png"><span class="voiceIconTitles">Block Anonymous Calls</span>
      </a>
      <div id="BlockAnonModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Block Anonymous Calls</h4>
            </div>
            <div class="modal-body">
              <p>Reject calls from anyone whose caller ID information is blocked. Callers will automatically receive a message that you're not accepting Caller ID Blocked calls and will be advised to unblock their number and try their call again.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#AcceptSelectedModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-10.png"><span class="voiceIconTitles">Accept Selected Callers</span>
      </a>
      <div id="AcceptSelectedModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Accept Selected Callers</h4>
            </div>
            <div class="modal-body">
              <p>Limit incoming calls to selected designated numbers and route all other incoming calls to a polite message stating calls are not being accepted at this time.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
  </div>
  <div class="row">
    <li>
      <a href="#" data-toggle="modal" data-target="#CallWaitingWithIDModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-11.png"><span class="voiceIconTitles">Call Waiting with Caller ID</span>
      </a>
      <div id="CallWaitingWithIDModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Call Waiting with Caller ID</h4>
            </div>
            <div class="modal-body">
              <p>When you're on the phone and someone else is calling, it's nice to know who it is. Call Waiting with Caller ID from Charter Spectrum Voice allows you to see who's calling and you can decide whether or not to answer it.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#BlockUnwantedCallersModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-12.png"><span class="voiceIconTitles">Block Unwanted Callers</span>
      </a>
      <div id="BlockUnwantedCallersModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Block Unwanted Callers</h4>
            </div>
            <div class="modal-body">
              <p>Charter Spectrum Voice lets you automatically route designated numbers to a polite message stating that calls are not being accepted at this time.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#3WayModal">
        <img src="http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-13.png"><span class="voiceIconTitles">3-Way Calling</span>
      </a>
      <div id="3WayModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">3-Way Calling</h4>
            </div>
            <div class="modal-body">
              <p>With 3-Way Calling, you can speak to two different parties at the same time. Additionally, you can also place one party on hold while you speak privately to the other, and then return to the 3-Way call.</p>
            </div>
          </div>
        </div>
      </div>
    </li>
  </div>
</ul>

正如你在图片中看到的那样，那里都是不平整的，这就是它应该看起来的样子(psd img)，它不一定是 7 宽。

Answer 1

因为你有 14 个元素(假设这是一个固定数量)，你不能使用 Bootstrap 网格系统，除非你用 4+4+3 个元素或 6+6+2 个元素制作三行。否则，您可以将列表放在行内，像这样，并使用 Bootstrap 类 .list-inline 作为 Bootstrap 3.x 内联列表:

<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <ul class="list-inline">
            <li>/* 7 <li> elements */</li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <ul class="list-inline">
            <li>/* 7 <li> elements */</li>
        </ul>
    </div>
</div>

请记住，.row 会向 div 添加填充，您的修复也是如此。

如果要使用Grid系统，可以使用如下代码:

<div class="row">
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-4 col-sm-offset-2"> /* add offset to center the two elements*/
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-4 ">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
</div>