让bootstrap col工作

Question

我有一组链接，我想要均匀分隔，也应该是移动响应。我似乎无法让他们成为公司。

StrokeMiterLimit 与之关联的代码：

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添加填充，修复也是如此。

如果要使用网格系统，可以使用以下代码：

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

Answer 2

将ul#menu li更改为display:inline-block并添加宽度（PX或％）