Question

我正在使用Bootstrap 4设计一个网页，但我无法理解为什么该位置错误。从字面上看，我已经盯着我的代码停留了大约15分钟，我不知道为什么。

我的代码是：

<div class="container">

  <br/>
  <div class="row">
    <div class="col-md-6">
      <img src="img-side01a.jpg" width="555">
    </div>
    <div class="col-md-6" style="background-color: #5892EF;">

      <h2 style="color: white; @font-face{ font-family: bloomer; src: url('headerfont.otf');}">About Us</h2>

      <p style="color: white; font-family: 'Trebuchet MS';">text here</p>
    </div>
  </div>
  <br/>
  <div class="row">

    <div class="col-md-6" style="background-color: #5892EF;">
      <h2 style="color: white; @font-face{ font-family: bloomer; src: url('headerfont.otf');}">Mission Statement <img src="img-icon01a.png" width="25" height="25"></h2>
      <p style="color: white; font-family: 'Trebuchet MS';">text here</p>
    </div>
    <div class="col-md-6">
      <img src="img-side01b.png" class="img-fluid" width="555">
    </div>
  </div>
  <br/>
  <hr> copyright
</div>

但是有一个我无法消除的差距。我尝试将第一张图片用于第二张图片，这没有什么区别...

image

Answer 1

间隙是因为您定义了2行。您可以将所有col-md类放在一行中。您当前的代码第二行列将自动位于第一行元素的下方，没有任何空格。

private void SavingPostInformationToDatabase()
{  UsersRef.child(current_user_id).addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
            if (dataSnapshot.exists()) {
                String userFullName = dataSnapshot.child("fullname").getValue().toString();
                String UserName = dataSnapshot.child("username").getValue().toString();
                String userProfileImage = dataSnapshot.child("profileimage").getValue().toString();

                HashMap postsMap = new HashMap();
                postsMap.put("uid", current_user_id);
                postsMap.put("date", saveCurrentDate);
                postsMap.put("time", saveCurrentTime);
                postsMap.put("description", Description);
                postsMap.put("postimage", downloadUrl);
                postsMap.put("profileimage", userProfileImage);
                postsMap.put("fullname", userFullName);
                postsMap.put("username", UserName);
                postsMap.put("counter", CountPost);

                PostsRef.child(current_user_id + postRandomName).updateChildren(postsMap)
                        .addOnCompleteListener(new OnCompleteListener() {
                            @Override
                            public void onComplete(@NonNull Task task) {
                                if (task.isSuccessful()) {
                                    SendUserToMainActivity();
                                    Toast.makeText(PostRecipeActivity.this, "New Post is updated successfully.", Toast.LENGTH_SHORT).show();
                                    loadingBar.dismiss();
                                } else {
                                    Toast.makeText(PostRecipeActivity.this, "Error Occured while updating your post.", Toast.LENGTH_SHORT).show();
                                    loadingBar.dismiss();
                                }
                            }
                        });
            }
        }

        @Override
        public void onCancelled(@NonNull DatabaseError databaseError) {

        }
    });
}

尝试此代码。这不是您的错。Bootstrapscol-md类默认保持15px填充。

我在Bootstrap 4上的展示位置有问题吗？

1 个答案: