Question

我有 4 Div ，一行 col-md-3 但文字看起来确实很难看。我在这里做了一点概述：

 Prod.      Comp.    (middle)    lang.     div4
   text     texttext              text     text
 textta       text                 txt      txt

这意味着，文字不在 / Product，company，languange和4th Division

下

我希望看起来像这样

 div1      div2     (middle)    div3     div4
 text      texttext             text     text
 textta    text                 txt      txt

这是我的代码

HTML：

<div class="container">
            <div class="row" id="footerRow">

                 <div class="col-xs-12 col-md-3">
                    <h2>Product</h2>
                    <ul>
                        <li> <a href="templates.php">Templates</a></li> 
                        <li> <a href="pricing.php">Pricing</a></li>
                    </ul>
                </div>

                 <div class="col-xs-12 col-md-3">
                    <h2>Company</h2>
                        <ul>
                            <li><a href="aboutus.php">About Us</a></li>
                            <li><a href="contact.php">Contact us</a></li>
                            <li><a href="terms.php">Terms of Servise</a></li>
                            <li><a href="policy.php">Privacy policy</a></li>
                        </ul>
                </div>

                 <div class="col-xs-12 col-md-3">
                    <h2>Language</h2>
                        <ul>
                            <li><a href="login.php">Englisch</a></li>
                            <li><a href="login.php">German</a></li>
                            <li><a href="login.php">Srpski</a></li>
                        </ul>
                </div>          

                 <div class="col-xs-12 col-md-3">
                    <h2> </h2>
                        <ul>
                            <li><a href="login.php">facebook</a></li>
                            <li><a href="login.php">kaaa</a></li>
                            <li><a href="login.php">kaaa</a></li>
                        </ul>
                </div>  

            </div>
        </div>

这是我的css代码：

#footerRow{
  text-align: center;
}

如果可能，解决方案应该是响应式引导程序！

Answer 1

只需将中心改为左侧

text-align: left

Here就是一些例子。

Answer 2

看看这是否是您正在寻找的https://jsfiddle.net/DTcHh/26745/

删除

#footerRow{
  text-align: center;
}

Answer 3

删除padding和margin为零。删除text-align:center

的#footerRow

#footerRow ul {margin:0px;padding:0px}
#footerRow ul li{
  text-align: left;
  list-style:none
}
#footerRow h2{min-height:30px}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" id="footerRow">
      <div class="col-xs-12 col-md-3">
        <h2>Product</h2>
        <ul>
          <li> <a href="templates.php">Templates</a></li> 
          <li> <a href="pricing.php">Pricing</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-md-3">
        <h2>Company</h2>
        <ul>
          <li><a href="aboutus.php">About Us</a></li>
          <li><a href="contact.php">Contact us</a></li>
          <li><a href="terms.php">Terms of Servise</a></li>
          <li><a href="policy.php">Privacy policy</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-md-3">
        <h2>Language</h2>
        <ul>
          <li><a href="login.php">Englisch</a></li>
          <li><a href="login.php">German</a></li>
          <li><a href="login.php">Srpski</a></li>
        </ul>
      </div>          
      <div class="col-xs-12 col-md-3">
        <h2> </h2>
        <ul>
          <li><a href="login.php">facebook</a></li>
          <li><a href="login.php">kaaa</a></li>
          <li><a href="login.php">kaaa</a></li>
        </ul>
      </div>  
    </div>
</div>

Answer 4

尝试这个......

＆＃13;

<form id="logoutForm" method="POST" action='<c:url value="/logout"/>'>
    <sec:csrfInput/>
</form>

＆＃13;

ol, ul {list-style: none;}
#footerRow ul {margin:0px;padding:0px}

＆＃13;

Answer 5

Here JSFiddle enter link description here

ul{
  list-style-type: none;
  padding: 0px;
}
#footerRow{
  display: inline-flex;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" id="footerRow">

         <div class="col-xs-12 col-md-3">
            <h2>Product</h2>
            <ul>
                <li> <a href="templates.php">Templates</a></li> 
                <li> <a href="pricing.php">Pricing</a></li>
            </ul>
        </div>

         <div class="col-xs-12 col-md-3">
            <h2>Company</h2>
                <ul>
                    <li><a href="aboutus.php">About Us</a></li>
                    <li><a href="contact.php">Contact us</a></li>
                    <li><a href="terms.php">Terms of Servise</a></li>
                    <li><a href="policy.php">Privacy policy</a></li>
                </ul>
        </div>

         <div class="col-xs-12 col-md-3">
            <h2>Language</h2>
                <ul>
                    <li><a href="login.php">Englisch</a></li>
                    <li><a href="login.php">German</a></li>
                    <li><a href="login.php">Srpski</a></li>
                </ul>
        </div>          

         <div class="col-xs-12 col-md-3">
            <h2>Social </h2>
                <ul>
                    <li><a href="login.php">facebook</a></li>
                    <li><a href="login.php">kaaa</a></li>
                    <li><a href="login.php">kaaa</a></li>
                </ul>
        </div>  

    </div>
</div>

如何将文本与ul＆amp;里

5 个答案: