Question

在bootstrap-4中，nav-pill个链接的类具有相同的宽度并占据所有水平空间：

对于等宽元素，请使用.nav-justified。所有水平空间都将被导航链接占用。

至少他们在这里说的是：Bootstrap: Fill and justify

这是他们的代码：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="nav nav-pills nav-justified">
   <a class="nav-link active" href="#">Active</a>
   <a class="nav-link" href="#">Longer nav link</a>
   <a class="nav-link" href="#">Link</a>
   <a class="nav-link disabled" href="#">Disabled</a>
</nav>

＆＃13;

似乎无法正常工作......

我错过了什么或误解了什么？

修改
让我重新解释一下我的问题：
我理解.nav-fill的作用我想理解 .nav-justified做了什么以及为什么他们没有按照他们的说法工作。

Answer 1

将nav-fill类添加到nav元素。 .nav-justified使用相同的宽度链接。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h6>Using nav-fill (to achive dynamic width link as link content</h6>
<nav class="nav nav-pills nav-fill">
   <a class="nav-item nav-link active" href="#">Active</a>
   <a class="nav-link nav-item" href="#">Longer nav link</a>
   <a class="nav-link nav-item" href="#">Link</a>
   <a class="nav-link nav-item disabled" href="#">Disabled</a>
</nav>
<h6>Using nav-fill and nav-justified (to achive same width link)</h6>
<nav class="nav nav-pills nav-fill nav-justified">
   <a class="nav-item nav-link active" href="#">Active</a>
   <a class="nav-link nav-item" href="#">Longer nav link</a>
   <a class="nav-link nav-item" href="#">Link</a>
   <a class="nav-link nav-item disabled" href="#">Disabled</a>
</nav>

或者如果你想要你可以在没有bootstrap的情况下做到这一点。为了更好地理解。

.custom-nav {
  display: flex;
}

.custom-nav a {
  flex: 1 1 auto; /* this line do all magic */ 
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px 20px;
}

    <nav class="custom-nav">
       <a  href="#">Active</a>
       <a  href="#">Longer nav link</a>
       <a  href="#">Link</a>
       <a  href="#">Disabled</a>
    </nav>

Answer 2

您需要遵循bootstrap public class LockscreenActivity extends AppCompatActivity implements View.OnClickListener { private EditText mPasswordField; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_lockscreen); initViews(); getInputText(); } private void initViews() { mPasswordField = $(R.id.password_field); $(R.id.t9_key_0).setOnClickListener(this); $(R.id.t9_key_1).setOnClickListener(this); $(R.id.t9_key_2).setOnClickListener(this); $(R.id.t9_key_3).setOnClickListener(this); $(R.id.t9_key_4).setOnClickListener(this); $(R.id.t9_key_5).setOnClickListener(this); $(R.id.t9_key_6).setOnClickListener(this); $(R.id.t9_key_7).setOnClickListener(this); $(R.id.t9_key_8).setOnClickListener(this); $(R.id.t9_key_9).setOnClickListener(this); $(R.id.t9_key_clear).setOnClickListener(this); $(R.id.t9_key_backspace).setOnClickListener(this); } @Override public void onClick(View v) { // handle number button click if (v.getTag() != null && "number_button".equals(v.getTag())) { mPasswordField.append(((TextView) v).getText()); return; } switch (v.getId()) { case R.id.t9_key_clear: { // handle clear button // mPasswordField.setText(null); String a=getInputText(); Toast.makeText(LockscreenActivity.this,a,Toast.LENGTH_LONG).show(); } break; case R.id.t9_key_backspace: { // handle backspace button // delete one character Editable editable = mPasswordField.getText(); int charCount = editable.length(); if (charCount > 0) { editable.delete(charCount - 1, charCount); } } break; } } public String getInputText() { return mPasswordField.getText().toString(); } protected <T extends View> T $(@IdRes int id) { return (T) super.findViewById(id); } }结构才能实现此目的。您需要在html中包含a代码，并在li内提供li个分类nav-item，并为ul个类{{1} }

ul

工作小提琴here

Answer 3

您需要再添加一个类导航项

<nav class="nav nav-pills nav-fill">
   <a class="nav-item nav-link active" href="#">Active</a>
   <a class="nav-link nav-item" href="#">Longer nav link</a>
   <a class="nav-link nav-item" href="#">Link</a>
   <a class="nav-link nav-item disabled" href="#">Disabled</a>
</nav>

工作Jsfiddle

Bootstrap nav-justified不占全宽

3 个答案: