起動するためのブートストラップコールを取得する

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

を追加するために変更し、あなたがない限り、ブートストラップグリッドsystenを使用することはできません4 + 4 + 3要素、つまり6 + 6 + 2の3つの行を作成します。 そうでない場合、あなたはこのように、行の内部でリストを入れて、ブートストラップの3.xインラインリストについては、ブートストラップクラス.list-inlineを使用することができます。

<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を持っている、あなたは（これは固定された数量であると仮定）14個の要素を持っているので、幅（PXまたは％）