我有一组链接,我想均匀地间隔开它们,这些链接也应该是移动响应的。我似乎无法让他们加入公司。
code associated with it:
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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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>
As you can see in the picture there all uneven, this is what it should look like(psd img), It doesn't have to be 7 across.
![Correct Look from PSD](https://i.stack.imgur.com/pgQNn.jpg)
由于您有 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)