Question

我目前在引导行布局方面存在一些问题。在下面的代码中，我试图将位置对齐位置部分下方。由于某种原因，它显示在位置旁边的列中。

然而，当我将一个边框：实心样式放入地址部分时，它会根据我的需要进行对齐。想知道是否有人可以看到此代码的任何问题。

<div class="row-fluid" id="contact-location">
    <div class="col-sm-4"></div>
    <div class="col-sm-4" id="map">
        <h3><strong style="text-align:center"><b><u>Location</u></b></strong></h3>
        <div>
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2385.4505439345817!2d-6.336240884814465!3d53.2814638872712!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48670b168669ec2b%3A0x2d6785ebb4929856!2s94+Woodlawn+Park+Grove%2C+Dublin+24!5e0!3m2!1sen!2sie!4v1445292277523" width="100%" height="315" style="border:0; text-align:center" allowfullscreen></iframe>
            <!-- Google Map containing home address -->
        </div>
    </div>
    <div class="col-sm-4"></div>
</div>
<div class="row-fluid" id="contact-address">
    <div class="col-sm-4"></div>
    <div class="col-sm-4" id="address">
        <!-- printed address with contact numbers -->
        <h3><strong style="text-align:center;"><b><u>Address</u></b></strong></h3>
        <address style="text-align:center">
            <strong>Mr. XXXX XXXX</strong>
            <br> XX XXXXXXXXXX,
            <br> XXXXXXX,
            <br> XXXXX,
            <br> XXXXXX
            <br>
            <b>Mobile:</b>
            <br>
            <b>Home:</b>
        </address>
    </div>
    <div class="col-sm-4"></div>
</div>

Answer 1

strong是一个内联元素。您必须将text-align: center应用于阻止级别元素（在您的情况下为h3）。

<h3 style="text-align:center;"><strong><b><u>Address</u></b></strong></h3>

Answer 2

如果我正确理解您的问题，您可以随时尝试使用地址信息将地图居中。

如果是这种情况，您只需要调整您使用网格的方式。我没有在Bootstrap 3中使用row，使用columns（这将解决大部分问题）而不是像<div class="col-sm-4"></div>这样使用空<div class="col-sm-6 col-sm-offset-3">.，请使用12列或offset <strong>您也可以使用两个单独的行或一个，因为您占据了整个空间。

此外，本文可能对您感兴趣＆gt; MDN HTML强元素（<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row text-center" id="contact-location"> <div class="col-sm-6 col-sm-offset-3" id="map"> <h3><strong><b><u>Location</u></b></strong></h3> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2385.4505439345817!2d-6.336240884814465!3d53.2814638872712!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48670b168669ec2b%3A0x2d6785ebb4929856!2s94+Woodlawn+Park+Grove%2C+Dublin+24!5e0!3m2!1sen!2sie!4v1445292277523" width="100%" height="315" style="border:0; text-align:center" allowfullscreen></iframe> </div> <div class="col-sm-6 col-sm-offset-3" id="address"> <h3><strong><b><u>Address</u></b></strong></h3> <address> <strong><b>Mr. XXXX XXXX</b></strong> <br> XX XXXXXXXXXX, <br> XXXXXXX, <br> XXXXX, <br> XXXXXX <br> <b>Mobile:</b> <br> <b>Home:</b> </address> </div> </div> </div>）赋予文本强烈的重要性，通常以粗体显示。

希望这有帮助。

请参阅工作代码段。

＆＃13;

int size;
System.out.print("Enter the array size: "); 
size = input.nextInt();
int[] arr = new int[size];

＆＃13;

Bootstrap行无法正确对齐

2 个答案: