`col-xs- *` ไม่ทำงานใน Bootstrap 4

169

ฉันไม่เคยพบสิ่งนี้มาก่อนและฉันมีเวลาที่ยากมากในการพยายามหาวิธีแก้ปัญหา เมื่อมีคอลัมน์เท่ากับสื่อใน bootstrap เช่น:

<h1 class="text-center">Hello, world!</h1>

  <div class="container">
      <div class="row">
          <div class="col-md-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

การจัดแนวข้อความทำงานได้ดี:

แต่เมื่อสร้างคอลัมน์เท่ากับขนาดเล็กพิเศษเช่น:

 <div class="container">
      <div class="row">
          <div class="col-xs-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

จากนั้นการจัดแนวข้อความจะไม่ทำงานอีกต่อไป:

มีแนวคิด bootstrap บางอย่างที่ฉันไม่เข้าใจหรือเป็นจริงข้อผิดพลาดเช่นฉันคิดว่ามันเป็น ฉันไม่เคยมีปัญหานี้เนื่องจากข้อความของฉันสอดคล้องกับอดีตกับ xs เสมอ ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก. นี่คือรหัสที่สมบูรณ์ของฉัน:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1 class="text-center">Hello, world!</h1>

      <div class="container">
          <div class="row">
              <div class="col-xs-12 text-center">
                  <h1>vicki williams</h1>
              </div>
          </div>
      </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

— YoungCoder
แหล่งที่มา

7

col-xs-*ไม่มีอยู่ในรุ่นล่าสุดของ v4 นั่นคือสาเหตุที่คุณเห็นสิ่งนี้ col-xs-12ไม่ได้มีการตั้งค่าความกว้างของ 100% col-md-12เช่นคุณ ตรวจสอบ DevTools เพื่อดูทุกอย่างและดูPull

— vanburen

437

col-xs-*ได้รับการลดลงในเงินทุน 4 col-*ในความโปรดปรานของ

แทนที่col-xs-12ด้วยcol-12และมันจะทำงานตามที่คาดไว้

หมายเหตุยังcol-xs-offset-{n}ถูกแทนที่ด้วยoffset-{n}ใน v4

— เต่า
แหล่งที่มา

8

ไม่เคยแม้แต่จะคิดหรือรู้จักในสิ่งนี้! ขอบคุณมาก.

— YoungCoder

12

ตรวจสอบเอกสารทุกครั้ง การเข้ารหัสที่มีความสุข! ::} <((((*> ::

— เทา

8

นี่ไม่ใช่สิ่งที่คุณมักจะตรวจสอบเอกสาร ฉันอยู่เหนือเอกสารทั้งหมดและก็พลาดเรื่องนี้เช่นกัน ฉันคิดว่าการโยกย้ายไซต์ bs4 มากกว่าสองครั้งในขณะนี้ col นั้นมีไว้สำหรับทั่วไปและ col-xs นั้นจะเฉพาะเจาะจง แต่ในการเข้าใจถึงปัญหานี้มันไม่สมเหตุสมผลเลย ขอบคุณสำหรับการเตือนฉันคิดว่าฉันได้อ่านอย่างนั้นในระหว่างการย้ายครั้งล่าสุดของฉัน แต่ติดอยู่ที่นี่ในนี้

— blamb

1

สิ่งหนึ่งที่แม้ว่า Andrei; เป็นเพียง "xs" ที่ถูกทิ้งหรือมีคนอื่นด้วยหรือไม่

— Funk Forty Niner

2

โปรดอ่านคำตอบนี้เกี่ยวกับสิ่งที่เปลี่ยนแปลงระหว่าง v3 และ v4 ) และลิงก์ไปยังเครื่องมือหากคุณตัดสินใจที่จะทำเช่นนั้น ไม่ใช่เรื่องง่ายและ IMHO ง่ายต่อการทำงานกับเทมเพลตที่สะอาดและเพียงแค่แทรก php แทนที่จะเปลี่ยนมาร์กอัป

— เทาร

21

ฉันเพิ่งสงสัยว่าทำไมcol-xs-6ไม่ได้ผลสำหรับฉัน แต่แล้วฉันก็พบคำตอบในเอกสารประกอบ Bootstrap 4 คำนำหน้าชั้นเรียนสำหรับอุปกรณ์ขนาดเล็กเป็นพิเศษอยู่ในขณะนี้ขณะที่อยู่ในรุ่นก่อนหน้านี้มันเป็นcol-col-xs

https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

Bootstrap 4 ทำให้col-xs-*คลาสทั้งหมดลดลงดังนั้นควรใช้col-*แทน ยกตัวอย่างเช่นแทนที่ด้วยcol-xs-6col-6

— ซาบีร์ฮุสเซน
แหล่งที่มา

2

คุณสามารถทำได้ถ้าคุณต้องการใช้ไวยากรณ์เก่า (หรือไม่ต้องการเขียนทุก ๆ เทมเพลต)

@for $i from 1 through $grid-columns {
  @include media-breakpoint-up(xs) {
    .col-xs-#{$i} {
      @include make-col-ready();
      @include make-col($i);
    }
  }
}

— wiwolavida
แหล่งที่มา

2

พวกเขาทำ XS ตกเพราะ Bootstrap ถือเป็นเครื่องมือพัฒนาครั้งแรกของมือถือ มันคือค่าเริ่มต้นที่ถือว่าเป็น xs ดังนั้นจึงไม่จำเป็นต้องกำหนด

— SMWalker
แหล่งที่มา

1

ในBootstrap 4.3 , col-xs- {value} จะถูกแทนที่ด้วย col- {value}

ไม่มีการเปลี่ยนแปลงในsm, md, lg, xlยังคงเหมือนเดิม

.col- {value}
.col-sm- {value}
.col-md- {value}
.col-lg- {value}
.col-xl- {value}

— Dorjee Karma
แหล่งที่มา

-1

Bootstrap 4 Grid คลาส col-xs- *

ในชั้นเรียน bootstrap 4 ตารางจะแตกต่างกันสำหรับมุมมองที่แตกต่างกันหรือเหมือนกัน

หากคุณต้องการใช้คลาส. col-xs- *

คลาสนี้ใช้งานได้สำหรับมุมมองอุปกรณ์พกพา

หากต้องการดูความแตกต่างคุณสามารถลองใช้รหัสนี้ด้านล่างและดูความแตกต่าง จากนั้นใช้คลาสนี้ในรหัสของคุณ

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-4 col-xs-12">Hello!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hi!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hey!</div>
  </div>
</div>

— บาร์มาร์ปาร์มาร์
แหล่งที่มา

col-xs ถูกดร็อปใน Bootstrap 4

— Wariored

กรุณาดูที่ลิงค์: bitdegree.org/learn/… *% 20in% 20your% 20code

— barti parmar