I have a simple Bootstrap table with 5 columns and 7 rows.
(我有一个简单的Bootstrap表，其中包含5列7行。)
First row contains header. (第一行包含标题。)
First column of all remaining 7 rows contains a fixed text and column 2 to 5 are text boxes to received some input. (其余所有7行的第一列包含固定文本，第2列至第5列是用于接收某些输入的文本框。)
All nicely formatted (border, colours etc) and looks OK on the desktop screen but obviously it does not work on the mobile phone screen. (所有格式都很好（边框，颜色等），并且在桌面屏幕上看起来还可以，但显然在手机屏幕上不起作用。)
Therefore, I changed the table to responsive .
(因此，我将表更改为响应。)
I have used various columns width eg col-lg, col-md, col-xs etc. All looks OK on a desktop screen. (我已经使用了各种列宽，例如col-lg，col-md，col-xs等。在桌面屏幕上，所有看起来都不错。)
On the mobile phone screen the required horizontal scroll bar appears but when I scroll to the extreme right my NavBar is NOT stretched to the width of the container ie it does not look nice that the NavBar is restricted to the width of the mobile phone screen but the table below is wider than the NavBar. (在手机屏幕上会出现所需的水平滚动条，但是当我滚动到最右端时，我的NavBar不会拉伸到容器的宽度，即NavBar限于手机屏幕的宽度看起来并不好，但是下表比NavBar宽。)
I do not wish to include the NavBar in the container as that leaves spaces on either side of the NavBar. (我不希望将NavBar包含在容器中，因为这样会在NavBar的两侧留下空间。)
Is there any way I could stretch the NavBar to be the same width as the table in the container below? (有什么办法可以将NavBar拉伸为与下面容器中的表相同的宽度？)
On the other hand ideally what I need is a way to convert columns to rows as follows:
(另一方面，理想情况下，我需要一种将列转换为行的方法，如下所示：)
When the user first starts, the screen will show fixed text from column 1 (ie 7 clickable rows of fixed text).
(用户首次启动时，屏幕将显示第1列中的固定文本（即7个可单击的固定文本行）。)
eg (例如)
Text 01 Text 02 Text 03 Text 04 Text 05 Text 06 Text 07
(文字01文字02文字03文字04文字05文字06文字07)
So when the user clicks on a row (above ie Text 01 to Text 07) then the area below the clicked row will expand and the input textboxes for example for Text 01 will show as follows:
(因此，当用户单击一行（在文本01到文本07上方）时，被单击的行下方的区域将扩大，例如文本01的输入文本框将显示如下：)
Column 01: Textbox01 Column 02: Textbox02 Column 03: Textbox03 Column 04: Textbox04 Column 05: Textbox05
(列01：Textbox01列02：Textbox02列03：Textbox03列04：Textbox04列05：Textbox05)
User will enter input in the textboxes above and will then click the next row and so on and will finally click the "Save" button to save data from all text boxes of 7 rows (5 columns) into the database.
(用户将在上面的文本框中输入输入，然后单击下一行，依此类推，最后单击“保存”按钮，以将数据从7行（5列）的所有文本框中保存到数据库中。)
I would really appreciate if someone can direct me to some example code please?
(如果有人可以将我引导到一些示例代码，我将不胜感激？)
ask by moodhi translate from so 
