Question

所以，我的问题是说我试图让 4 DIV 在同一行/行中。

          Product      Company   (middle)      Languages    DIV4
          text...      text...                 text...      text...
          text...      text...                 text...      text...

它应该看起来像......我希望你明白我的意思！

所以这是我的代码：`

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

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

                 <div class="col-md-4">
                            <h2>Company</h2>
                            <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>
                </div>          

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

                 <div class="col-md-4">
                            <li><a href="login.php">facebook</a></li>
                            <li><a href="login.php">kaaa</a></li>
                            <li><a href="login.php">kaaa</a></li>
                </div>          

            </div>
        </div>

Answer 1

首先确保您的标记有效。例如。对于IMPORTED_LOCATION代码，li代码丢失了。

如果您想显示4个div，则需要使用课程ul而不是col-md-3。 Bootstrap使用的网格系统的默认列数为12.如果需要4列，则必须使用12/4 = 3表示col-md-4。

col-md-3代表中等。因此，对于小型设备，列会断开并显示在彼此之上。全屏观看以下示例，查看彼此相邻的列。

＆＃13;

md

＆＃13;

Answer 2

可能是屏幕尺寸问题，也可能是sytax问题

Bootstrap每行只允许12列，因此每列需要＆＃34; width＆＃34; 3，col-md-3
然后，因为大小设置为md，所以为中等大小的屏幕设置了列宽
使用col-xs-3，它会使列尽可能小而不会溢出到下一行

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="container">
  <div class="row">

    <div class="col-md-3 col-xs-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-md-3 col-xs-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-md-3 col-xs-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-md-3 col-xs-3">
      <h2>Share</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>

＆＃13;

Answer 3

检查此代码段

.row {
  display: flex;
}

<div class="container">
  <div class="row">

    <div class="col-md-4">
      <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-md-4">
      <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-md-4">

      <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-md-4">
      <h2>div4</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>

希望这有帮助

Bootstrap不会在一行中获得4个DIV

3 个答案: