2016-10-27 2 views
-1

У меня есть некоторые ссылки на ссылки в бутстрах равной ширины col-md-2, но текст ссылки меняется по длине. Как бы я лучше всего разделил текст ссылки? Изменение класса столбцов между col-md-1 и col-md-3 не даст достаточно точной регулировки.Бутстрап и равное расстояние между заголовками меню

я установки скрипка здесь: https://jsfiddle.net/nickwuk/hr4fm4gf/

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <div id="footer"> 
      <div class="container"> 
       <div class="row rowtopmargin"> 
        <div id="footpayments" class="col-sm-6 col-md-3">Logo</div> 
        <div class="col-sm-6 col-md-9"> 
         <div class="row"> 
          <div class="col-md-2 footerlinks col-md-offset-1"><a href="#">Contact</a></div> 
          <div class="col-md-2 footerlinks fl2"><a href="#">Data Sheets</a></div> 
          <div class="col-md-2 footerlinks"><a href="#">Samples Policy</a></div> 
          <div class="col-md-2 footerlinks"><a href="#">Terms</a></div> 
          <div class="col-md-2 footerlinks"><a href="#">FAQ</a></div> 
          <div class="clearfix visible-md-block visible-lg-block footermenuseperator"></div> 
          <div class="col-md-2 footerlinks col-md-offset-1"><a href="#">Promise</a></div> 
          <div class="col-md-2 footerlinks"><a href="#">Testimonials</a></div> 
          <div class="col-md-2 footerlinks"><a href="#">Privacy Policy</a></div> 
          <div class="col-md-2 footerlinks"><a href="index.php">Home</a></div> 
          <div class="col-md-2 footerlinks last"><a href="#">Case Studies</a></div> 
          <div class="clearfix visible-md-block visible-lg-block footermenuseperator"></div> 
         </div> 
        </div> 
       </div> 
       <!-- end #footer --> 
      </div> 
     </div> 
    </div> 
    <!-- end container fluid --> 
</div> 

+0

«? Как бы я лучше равномерно пространство текст ссылки» - Вы хотите равномерно распределенный текст относительно друг друга или относительно ячейки, в которой они находятся? – RahulB

+0

Если текст в строках 1 и 2 был в воображаемых столбцах, где ширины столбцов были такими же широкими, как и самый широкий текст в этом столбце, тогда я хотел бы, чтобы мнимые столбцы были равномерно распределены. Таким образом, мнимый столбец «Условия и дом» был бы самым узким, а политика образцов и политика конфиденциальности была бы самой широкой, и разделение между этими воображаемыми столбцами было бы одинаковым. –

ответ

0

Привет вы используете бутстраповские и бутстраповские классы уже идут с левой и правой прокладкой поэтому регулировать ссылку пространства Я хотел бы предложить вам удалите правое заполнение из класса col-md-2, прежде чем делать это, назначая ему другой класс.

+0

Я думаю, что первая колонка с «Контакт» и «Обещание» все равно была бы слишком широкой даже без правильного заполнения, поэтому, возможно, мне нужно переопределить ширину класса col-md-2 с новым классом, который применяется только на более широком экране ширины и сбрасывается для мобильных телефонов. –

0

Решение, которое я использовал, чтобы добавить новый класс к каждому DIV, что указанный новый процент ширины, в CSS, я добавил следующее:

@media (min-width: 992px) { 
.w14pc {width:14.25%} 
.w185pc {width:18.5%} 
.w20pc {width:20.385%} 
.w12pc {width:12.2%} 
.w18pc {width:18%} 
} 
Смежные вопросы