让bootstrap col工作 [英] Getting bootstrap col to work
本文介绍了让bootstrap col工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一组链接，我想均匀地空间，也应该是移动响应。我似乎无法让他们到公司。
与之关联的代码：
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 =modaldata-target =＃VoicemailModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-14.png>< span class =voiceIconTitles>语音信箱< / span> < / a> < div id =VoicemailModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>语音信箱< / h4> < / div> < div class =modal-body> < p>这是您自己的个人回答服务。现在来电者可以在您的线路忙碌时，当您离家时，或者您不能拨打电话时，为您留下邮件。每当您在家庭电话线上听到短暂的拨号音时，表示您有新讯息。< / p> < / div> < / div> < / div> < / div> < / li> < li> < a href =＃data-toggle =modaldata-target =＃ForwardinglModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-1.png>< span class =voiceIconTitles>所有来电转接< / span> ; < / a> < div id =ForwardinglModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>所有来电转接< / h4> < / div> < div class =modal-body> < p>当您离开家时，将来电转接到另一个号码，这样您就不会错过重要的通话。< / p> < / div> < / div> < / div> < / div> < / li> < li> < a href =＃data-toggle =modaldata-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 =VIPModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title> VIP Ringing< / h4> < / div> < div class =modal-body> < p>特殊铃声识别您所选择号码的来电。< / p> < / div> < / div> < / div> < / div> < / li> < li> < a href =＃data-toggle =modaldata-target =＃RepeatDialingModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-4.png>< span class =voiceIconTitles>重复拨号*< span> < / a> < div id =RepeatDialingModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>重复拨号< / h4> < / div> < div class =modal-body> < p>重复拨号允许您为您自动重拨忙碌号码，然后在号码不再忙碌时通知您，以便您通过。 < br /> *此服务仅限使用付费服务。每次使用时，您将收取90美分的费用，每月最多收取9.00美元的重复拨号使用费。语音在线管理器滚动到探索国际电话国际电话< / p> < / div> < / div> < / div> < / div> < / li> < li> < a href =＃data-toggle =modaldata-target =＃CallWaitingModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-5.png>< span class =voiceIconTitles>呼叫等待< / span> < / a> < div id =CallWaitingModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>呼叫等待< / h4> < / div> < div class =modal-body> < p>不要因为你在电话上错过一个重要的电话。使用Charter Spectrum Voice的呼叫等待，一个软哔哔声会让你知道另一个人正在呼叫你。< / p> < / div> < / div> < / div> < / div> < / li> < li> < a href =＃data-toggle =modaldata-target =＃SelectiveCallModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-6.png>< span class =voiceIconTitles>选择性来电转接< / span> ; < / a> < div id =SelectiveCallModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>选择性来电转接< / h4> < / div> < div class =modal-body> < p>只转接来自一组选定电话号码的来电。< / p> < / div> < / div> < / div> < / div> < / li> < / div> < div class =row> < li> < a href =＃data-toggle =modaldata-target =＃SpeedDialModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-7.png>< span class =voiceIconTitles>快速拨号< / span> < / a> < div id =SpeedDialModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>快速拨号< / h4> < / div> < div class =modal-body> < p>无需记住电话号码，您最多可以编程8个号码以进行快速一位数拨号。< / p> < / div> < / div> < / div> < / div> < / li> < li> < a href =＃data-toggle =modaldata-target =＃VoiceOnlineModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon15.png>< span class =voiceIconTitles>语音在线管理器< / span> ; < / a> < div id =VoiceOnlineModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>语音在线管理器< / h4> < / div> < div class =modal-body> < p>使用「语音线上管理工具」随时随地，在家中或随时随地管理您的住宅电话，无需额外费用，可享有Charter Spectrum Voice的客户使用。 < / div> < / div> < / div> < / div> < / li> < li> < a href =＃data-toggle =modaldata-target =＃CallerIDModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-8.png>< span class =voiceIconTitles>来电显示< / span> < / a> < div id =CallerIDModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>来电显示< / h4> < / div> < div class =modal-body> < p>来自Charter Spectrum Voice的来电显示，任何来电者的电话号码和名称（如果有）都会显示在来电显示单元上，然后您才接听来电。< / p& < / div> < / div> < / div> < / div> < / li> < li> < a href =＃data-toggle =modaldata-target =＃BlockAnonModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-9.png>< span class =voiceIconTitles>阻止匿名来电< / span> ; < / a> < div id =BlockAnonModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>阻止匿名呼叫< / h4> < / div> < div class =modal-body> < p>拒绝任何来电者来电，来电显示资讯遭到封锁。来电者会自动收到您不接受来电显示被屏蔽来电的讯息，并建议您解除阻止他们的号码，然后再次尝试通话。< / p> < / div> < / div> < / div> < / div> < / li> < li> < a href =＃data-toggle =modaldata-target =＃AcceptSelectedModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-10.png>< span class =voiceIconTitles>接受所选来电者< / span> ; < / a> < div id =AcceptSelectedModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>接受所选来电者< / h4> < / div> < div class =modal-body> < p>将来电限制为所选指定号码，并将所有其他来电转接到礼貌讯息，说明目前未接受来电。< / p> < / div> < / div> < / div> < / div> < / li> < / div> < div class =row> < li> < a href =＃data-toggle =modaldata-target =＃CallWaitingWithIDModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon11.png>< span class =voiceIconTitles>来电等待与来电显示< / span> < / a> < div id =CallWaitingWithIDModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal -head> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>呼叫等待来电显示< / h4> < / div> < div class =modal-body> < p>当您打电话时，有人正在打电话，很高兴知道是谁。呼叫等待来自Charter Spectrum的来电显示语音可让您查看谁在打电话，您可以决定是否回复。< / p> < / div> < / div> < / div> < / div> < / li> < li> < a href =＃data-toggle =modaldata-target =＃BlockUnwantedCallersModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-12.png>< span class =voiceIconTitles>阻止不需要的来电者< / span> ; < / a> < div id =BlockUnwantedCallersModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>阻止不需要的来电者< / h4> < / div> < div class =modal-body> < p> Charter Spectrum Voice可让您自动将指定号码路由到有礼貌的讯息，说明目前未接受来电。< / p> < / div> < / div> < / div> < / div> < / li> < li> < a href =＃data-toggle =modaldata-target =＃3WayModal> < img src =http://buildsite1.com/charter/wp-content/uploads/2016/04/Icon-13.png>< span class =voiceIconTitles> 3向呼叫< / span> < / a> < div id =3WayModalclass =modal faderole =dialog> < div class =modal-dialog> <！ - 模态内容> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title> 3方呼叫< / h4> < / div> < div class =modal-body> < p>使用三方通话时，您可以同时与两个不同方通话。此外，您还可以将一方保留，而对方私下交谈，然后返回到三方通话。< / p> < / div> < / div> < / div> < / div> < / li> < / div>< / ul>
看到在图片中有所有不均匀，这是它应该看起来像（psd img），它不必是7横跨。
解决方案
一个固定的数量），你不能使用Bootstrap网格systen，除非你做三行与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>元素* /< / 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>元素* /< / li>
< / ul>
< / div>
< / div>
请记住， .row
如果你想使用Grid系统，你可以使用下面的代码：
<$> p $ p>
< 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>
I have a group of links that i want to evenly space out that should also be mobile responsive. I cant seem to get them to corporate.
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.
解决方案
Since you have 14 elements (assumed this is a fixed qty), you can't use Bootstrap grid systen, unless you make three rows with 4+4+3 elements, or 6+6+2.
Otherwise, you can put lists inside rows, like this, and use Bootstrap class .list-inline for Bootstrap 3.x inline list:
<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>
Remember that .row adds padding to the div, so do your fixes.
If you want to use Grid system, you can use following code:
<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>
这篇关于让bootstrap col工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
